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Ch1 HTML5 简 介 


今后 的 一 个 月 内 会 连载 详细 的 Canvas 教 程 ， 从 零 基 础 开始 ， 到 Canvas API， 再 到 
基本 动画 与 高 级 动画 的 实现 ， 还 会 介绍 视 音频 的 处 理 、 移 动 应 用 ， 最 后 如 果 有 时 间 
会 扩展 说 一 说 3D、 多 人 应 用 、 游 戏 制作 等 。 所 以 本 课程 虽说 是 Canvas 教 程 ， 但 其 
实 就 是 详细 的 介绍 Canvas API， 之 后 基于 Canvas 实 现 其 他 更 高 级 的 功能 。 


如 果 你 学 过 HTML4， 或 者 CSS、Javascript， 那 么 相信 你 入 手 起 来 会 很 快 ; 如 果 你 

啥 都 没 学 过 ， 属 于 零 基 础 ， 那 就 更 好 了 。 因 为 你 保有 对 这 个 未 知 领域 的 好 奇 心 ， 这 
一 切 都 会 激发 你 更 加 努力 的 向 前 。 而 且 零 基础 的 童鞋 也 不 用 担心 ， 本 教程 会 在 用 到 

其 他 知识 的 时 候 会 有 详细 的 扩展 说 明 ， 以 Canvas 为 线索 ， 学 完 它 你 基本 上 一 系列 的 
知识 也 都 学 会 了 ， 买 一 送 一 简直 不 能 更 赚 了 ! 其 中 也 会 穿插 讲解 数学 、 物 理学 、 运 
动 学 的 一 些 简单 的 知识 ， 每 个 知识 点 都 会 提供 案例 ， 每 个 案例 都 会 提供 页 面 演 

源 文 件 可 以 去 我 托管 在 github 上 的 一 个 开源 项 目 上 下 载 。 


T? 


提示 : 本 教程 中 有 链接 的 地 方 都 不 妨 点 一 点 : ) 


好 了 ， 是 不 是 摩 涯 擦 掌 、 迫 不 及 待 准 备 上 了 9? 那 就 让 我 们 开始 走 进 HTML5 的 世界 
吧 | 


HTML5 22 


HTML5 3; — 4X &] HTML(Hyper Text Markup Language)， 即 超 文本 标记 语言 ， 于 
去 年 10 月 28 日 正式 发 布 ， 它 是 全 新 的 、 互 联网 上 构建 页 面 的 标准 语言 。 


那么 完 竟 什么 是 HTML5? 在 W3C HTML5 的 常见 问题 中 ， 关 于 HTML5 是 这 样 说 明 
的 : HTML5 是 一 个 开放 的 平台 下 开发 的 免费 许可 条 款 。 


具体 来 说 ， 对 这 和 句 话 有 以 下 两 种 理解 : 


e 指 一 组 共同 构成 了 未 来 开放 式 网 络 平台 的 技术 。 这 些 技 术 包 括 HTML5 规 范 、 
CSS3、SVG、MATHML、 地 理 位 置 、XmlHttpRequest、Context 2D、Web 字 
体 以 及 其 他 技术 。 这 一 套 技术 的 边界 是 非 正 式 的 ， 且 随时 间 变 化 的 。 

e 指 HTML5 规 范 ， 当 然 也 是 开放 式 网 络 平台 的 一 部 分 。 


Canvas 的 浏览 器 支持 





由 于 课程 的 主要 内 容 是 Canvas， 以 下 我 列 出 了 最 流行 的 Web 浏 览 器 以 及 它们 开始 
支持 Canvas 元 素 的 最 小 版 本 号 。 


Safari Firefox lE Chrome Opear IOS- Android 
Safari Brower 
3.2 3.5 9 9 10.6 3.2 2.1 


这 里 我 推荐 使 用 Chrome 。 


所 以 在 学 习 本 课程 之 前 ， 赶 快 给 你 的 电脑 装 上 最 新 版 的 Chrome 吧 | 


基础 的 HTML5 页 面 


简单 的 HTML5 页 面 


<!doctype html> 

<html lang="zh"> 

<head> 

<meta charset="UTF-8"> 
«title» EA íJHTML5 H </title> 
</head> 

<body> 

Hello Airing! 

</body> 

</html> 


anvas/1/1-1.htmi 








HTML X d — 4- 4-7É ho 5 FM. <> 的 标签 元 素 组 成 ， 这 些 标签 通常 是 成 对 出 现 ， 并 
且 标 签 之 间 只 fi& de RS 能 交 


扩展 : 


成 对 出 现 的 叫做 闭合 标签 ， 单 个 出 现 的 叫做 单 标签 。 不 管 怎 样 都 是 闭合 的 ( 单 标 
签 可 以 不 闭合 ， 但 是 在 XHTML 中 严格 要 求 了 闭合 )。 闭 合 标签 又 分 为 开始 标签 
和 结束 标签 ， 如 «body» 是 开始 标签 ， </body> 是 结束 标签 。 自 标签 


p 


ge «input/» <br/> + ° 

关于 更 多 的 标签 ， 建 议 大 家 自行 了 解 一 下 。 推 荐 W3school 平 台 自 学 。 
这 里 我 们 着 重 讲 一 下 上 述 代 码 中 出 现 的 标签 。 

«!doctype html» 


这 个 标签 说 明 Web 浏览 器 将 在 标准 模式 下 呈现 页 面 。 根 据 W3C 定义 的 HTML5 规 
范 ， 这 是 HTML5 文档 所 必需 的 。 这 个 标签 简化 了 长 期 以 来 在 不 同 的 浏览 器 呈现 
HTML 页 面 时 出 现 的 奇怪 差异 。 它 通常 为 文档 中 的 第 一 行 。 


«html lang="en"> 


这 是 包含 语言 说 明 的 标签 ， 例 如 ，"en'" 为 英语 ，"zh" 为 中 文 。 


«head» ... «/head» 


这 2 个 标记 符 分 别 表示 头 部 信息 的 开始 和 结尾 。 头 部 中 包含 的 标记 是 页 面 的 标题 、 
序言 ` RAE , Dd de we is 影响 网 页 显示 的 效果 头 部 中 最 
常用 的 标记 符 是 «title» 标记 符 和 «meta» 标记 符 。 


以 下 表格 列 出 了 HTML head 元 素 下 的 所 有 标签 和 功能 


标签 描述 

<head> 定义 了 文档 的 信息 

«title» 定义 了 文档 的 标题 

<base> 定义 了 页 面 链接 标签 的 默认 链接 地 址 
«link» 定义 了 一 个 文档 和 外 部 资源 之 间 的 关系 
<meta> 定义 了 HTML 文 档 中 的 元 数据 
<script> 定义 了 客户 端的 脚本 文件 
<style> 定义 了 HTML 文 档 的 样式 文件 


«meta charset="UTF-8"> 


这 个 标签 说 明 Web 浏览 器 使 用 的 字符 编码 模式 ， 这 里 通常 设置 为 UTF-8。 如 果 没 
有 需要 特别 设置 的 没 必 要 改变 它 。 这 也 是 HTML5 页 面 需要 的 元 素 。 

«title» ... </title> 

这 个 标签 说 明 在 浏览 器 窗口 展示 的 HTML 的 标题 。 这 是 一 个 很 重要 的 标记 ， 它 是 搜 
索引 擎 用 来 在 HTML 页 面 上 收录 内 容 的 主要 信息 之 一 。 

«body» ... «/body» 

网 页 中 显示 的 实际 内 容 均 包含 在 这 2 个 <body> 之 间 。 


综 上 ，HTML5 网 页 是 由 第 一 行 的 <!doctype html» 与 <html> 部 分 组 成 ， 
而 <html> 主要 分 为 两 部 分 一 一 由 <head> 标签 规定 的 头 部 部 分 ， 和 
由 <body> 规定 的 主体 部 分 。 


这 样 ， 我 们 就 把 最 简单 的 HTML 网 页 的 基本 结构 给 择 出 来 了 。 


好 的 ， 接 下 来 就 让 我 们 的 主角 Canvas 登 场 吧 | 不 过 ， 在 此 之 前 ， 建 议 大 家 自行 了 解 
一 下 HTML 的 常用 标签 及 其 功能 ~ 


Ch2 开始 前 的 准备 


添加 一 个 Canvas 


在 HTML 中 添加 Canvas 非 党 简单， 只 需要 在 HTML 的 <body> 部 分 ， 添 加 
上 «canvas» 标签 就 可 以 了 | 可 以 参考 下 面 的 代码 。 


<!doctype html> 

<html lang="zh"> 

<head> 

<meta charset="UTF-8"> 
<title> 基 础 的 HTML5 页 面 </title> 
</head> 


<body> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
</canvas> 

</body> 


«/html» 


UL? (废话 ， 我 还 没 来 得 及 画 画 呢 1 ) Canas XX 


证 全 全 的 空白 页 面 ， 所 以 这 里 我 就 不 贴图 了 。 大 家 可 能 会 很 
a 
(ib...) ， 画 布 在 HTML5 中 是 透明 的 ， 是 不 可 见 的 。 


AB «canvas» 标签 中 的 那 段 文本 是 什么 意思 呢 ? 那 是 一 旦 浏览 器 执行 HTML 页 面 时 
不 支持 Canvas， 就 会 显示 这 段 文 字 ， 换 言 之 ， 只 要 你 的 浏览 器 支持 Canvas， 页 面 
上 就 不 会 显示 这 个 文本 。 


AB «canvas» 中 的 id 是 什么 意思 ?id 是 标签 的 属性 之 一 ， 在 JavaScript 代 码 中 用 来 
指定 特定 的 «canvas» 的 名 字 ， 就 像 一 个 人 的 身份 证 号 码 一 样 ， 是 唯一 的 。 

为 了 更 清楚 的 展示 Canvas， 以 及 方便 之 后 的 演示 ， 我 稍微 修改 了 一 下 代码 ， 之 后 的 
绘图 都 会 在 这 个 Canvas 上 绘制 。 


<!doctype html> 

<html lang="zh"> 

<head> 

<meta charset="UTF-8"> 
<title> 基 础 的 Canvas</title> 
</head> 


<body> 
<div id="canvas-warp"> 
«canvas id-"canvas" style="border: 1px solid #aaaaaa; displa 
y: block; margin: 50px auto;" width="800" height="600"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
</canvas> 
</div> 
</body> 


«/html» 








对 以 上 代码 有 几 点 说 明 : 


1. 添加 了 «div» 标签 ， 将 «canvas» 包 右 其 中 ， 个 人 习惯 ， 暂 时 并 没有 什么 外 
用 。 

2. 给 «canvas» 标签 指定 了 width 和 height 属 性 ， 规 定 了 它 的 宽 和 高 。 

3. 给 «canvas» 标签 添加 了 一 个 内 联 样式 ， 使 其 变 为 块 级 元 素 并 居中 显示 。 


关于 CSS 的 内 容 这 里 不 做 说 明 ， 毕 竟 这 不 是 本 课程 的 主角 ， 若 做 扩展 会 花费 大 
X AT.IESIHTML^CSSX X » s BLA Z6 RN SE OS 1E XN 
的 HTML+CSS 课 程 ) 


引用 Canvas 元 条 


文档 对 象 模型 (DOM) 


文档 对 象 模型 (Document Object Model， 简 称 DOM ) ， 是 W3C 组 织 推荐 的 处 理 可 

扩展 标志 语言 的 标准 编程 接口 。Document Object Model 的 历史 可 以 追溯 至 1990 年 

代 后 期 微软 与 Netscape 的 “浏览 器 大 战 "， 双 方 为 了 在 JavaScript 与 JScript 一 决 生 

死 ， 于 是 大 规模 的 赋予 浏览 器 强大 的 功能 。 微 软 在 网 页 技术 上 加 入 了 不 少 专 属 事 

物 ， KR ActiveX、 以 及 微软 自家 的 DHTML 格 式 等 ， 使 不 少 网 页 使 用 非 
微软 平台 及 浏览 器 无 法 正常 显示 。DOM 即 是 当时 毕 酿 出 来 的 杰作 。 


Dm 


文档 对 象 模型 代表 了 在 HTML 页 面 上 的 所 有 对 象 。 它 是 语言 中 立 且 平 台中 立 的 。 它 
允许 页 面 的 内 容 和 样式 被 Web 浏览 器 泻 染 之 后 再 次 更 新 。 用 户 可 以 通过 
JavaScript 77 =] DOM ° 


在 开始 使 用 «canvas» 前 ,首先 需要 了 解 两 个 特定 的 DOM 5I & : window 和 
document ° 
e window 对 象 是 DOM 的 最 高 一 级 ， 需 要 对 这 个 对 象 进 行 检 测 来 确保 开始 使 用 
Canvas 应 用 程序 之 前 ， 已 经 加 载 了 所 有 的 资源 和 代码 。 
e document 对 象 包含 所 有 在 HTML 页 面 上 的 HTML 标签 。 需 要 对 这 个 对 象 进 # 
检索 来 找 出 用 JavaScript 操纵 «canvas» 的 实例 。 


x 
位 


JavaScript 放置 位 置 


使 用 JavaScript 为 Canvas 编程 会 产生 一 个 问题 : 在 创建 的 页 面 中 ， 从 哪里 启动 
JavaScript 程 序 ? 


把 JavaScript 放 进 HTML 页 面 的 «head» 标签 中 是 个 不 错 的 主意 ， 这 样 做 的 好 处 
S S DREJE 4x LE 41017248 «head» 中 所 提 到 的 。 但 是 ， 把 JavaScript 
序 放 在 这 里 就 意味 着 整个 HTML 页 面 要 加 载 完 JavaScrpit 才能 配合 HTML 运 
行 ， 这 段 cea 代码 也 会 在 整个 页 面 加 载 前 就 开始 执行 了 。 结 果 就 是 ， 运 行 

JavaScript 程序 之 前 必须 检查 HTML. 页 面 是 否 已 经 加 载 完 毕 。 


最 近 有 一 个 趋势 是 将 JavaScript 放 在 HTML 文档 结尾 处 的 </body> 标签 之 前 ， 这 
样 就 可 以 确保 在 JavaScript 运行 时 整个 页 面 已 经 加 载 完毕 。 然 而 ， 由 于 在 运 

行 <canvas> 程序 前 需要 使 用 JavaScript 测试 页 面 是 否 加 载 ， 因 此 最 好 还 是 将 
JavaScript 放 在 <head> 中 。 


不 过 本 人 不 走 寻常 路 ( 笑 )， 所 以 之 后 的 案例 ， 还 是 按照 自己 的 编码 风格 将 JavaScript 
代码 放 在 了 <body> 的 尾部 。 当 然 ， 如 果 JavaScript 代 码 有 些 多 ， 就 推荐 使 用 加 载 
外 部 .js 文件 的 方式 。 代 码 大 致 如 下 : 


«script type="text/javascript" src="bootstarp.js"></script> 


在 实际 项 目 开发 中 ， 都 是 将 HTML、CSS、JS 三 者 完全 分 离 的 。 不 过 用 于 案例 演示 
代码 略 少 ， 所 以 大 多 没有 使 用 加 载 外 部 js 文件 的 方式 。 


获取 canvas 对 象 
获取 canvas 对 象 其 实 就 是 一 句 话 的 事情 


var canvas = document.getElementById("canvas"); 


var 用 于 变量 定义 ， 由 于 JS 是 弱 类 型 语言 ， 所 以 定义 啥 变量 都 用 var ° 

在 var 之 后 的 canvas 是 变量 。 使 用 document #49 getElementById() 的 方 
法 ， 通 过 jd 获取 对 象 。 之 前 我 们 为 «canvas» 标签 赋予 了 一 个 jd， 名 叫 canvas， 所 
以 该 句 话 最 后 一 个 canvas 是 指 «canvas» 的 id 一 ”canvas。 (是 不 是 有 点 绕 ， 需 

要 自己 多 读 几 遍 择 清楚 。 ) 


获得 画笔 (2D 环 境 ) 


画 首先 需要 哈 ?画笔 啊 。 获 取 canvas 画 笔 也 是 一 句 话 的 事情 ， 就 是 直接 使 用 刚才 
得 的 canvas 对 象 ， 调 用 它 的 getcontext("2d") 方法 ， 即 可 。 


var context = canvas.getContext("2d"); 


这 里 的 context 便 是 画笔 了 。 


在 其 他 教程 中 都 是 使 用 2D 环 境 这 个 专 有 术语 ， 我 觉得 画笔 更 加 形象 。 灵 感 引 自 Java 
中 Graphics 类 的 g 画 笔 ， 原 理 与 之 相同 。 


Yd 
总 结 


准备 工作 只 有 三 步 : 


1. 布置 画布 : 通过 添加 <canvas> 标签 ， 添 加 canvas 元 素 
2. 获取 画布 : 通过 <canvas> 标签 的 id， 获 得 canvas 对 象 


A 


3. 获得 画笔 : 通过 canvas 对 象 的 getContext("2d") 方法 ， 获 得 2D 环 境 
对 应 的 代码 也 就 是 三 钉 话 : 
1. «canvas id-"canvas"»«/canvas» 


2. var canvas - document.getElementById("canvas"); 
3. var context - canvas.getContext("2d"); 


完整 代码 如 下 。 


<!doctype html> 
<html lang="zh"> 
<head> 
<meta charset="UTF-8"> 
<title>% 4 4Canvas</title> 
</head> 


<body> 
<div id="canvas-warp"> 
<canvas id="canvas" style="border: 1px solid #aaaaaa; displa 
y: block; margin: 50px auto;" width="800" height="600"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 

window.onload = function()( 
var canvas - document.getElementById("canvas"); 
var context = canvas.getContext ("2d"); 


} 
</script> 
</body> 


«/html» 


HR 2-3 
注意 几 点 : 


1. JavaScript 50 AR ERE «script» 标签 中 。 
2. window.onload = function(){} 加 载 页 面 后 就 要 立即 执行 ， 表 示 网 页 加 载 
RATE t 4 AB Munction & 214 49 AÈ © 


至 此 ， 画 布 和 画笔 已 经 准备 完毕 ， 接 下 来 就 让 我 们 使 用 画笔 (context 对 象 ) 绘 制 出 高 
KH ARS! 觉醒 吧 | 艺术 家 之 魂 | 


Ch3 从 线段 开始 


怎么 画 线 段 ? 


上 一 讲 我 们 已 经 得 到 了 咱们 的 画布 和 画笔 ， 在 发 挥 艺术 家 之 魂 前 ， 还 是 要 像 小 孩 牙 
牙 学 语 一 样 ， 我 们 也 得 从 画 一 条 线段 开始 。 因 为 画 线段 是 最 简单 的 ， 最 基础 的 。 但 


日 


是 别 小 看 了 它 。 下 面 是 我 从 度 娘 那 里 找到 的 一 个 由 线条 组 成 的 图 像 。 





是 不 是 很 有 魔 性 ? 


e 确定 绘制 


因为 Canvas 是 基于 状态 的 绘制 (很 重要 ， 后 面 会 解释 ) ， 所 以 前 面 几 步 都 是 在 确 
定 状态 ， 最 后 一 步 才 会 具体 绘制 。 


移动 画笔 (moveTo()) 


之 前 我 们 获得 了 画笔 context ， 所 以 以 此 为 例 ， 给 出 改 方法 的 使 用 实例 
一 一 context.moveTo(100,100) ° iX 4J4X 3 8 eRe 移动 画笔 至 (100,100) 这 个 
点 (单位 是 pX) 。 记 住 ， 这 里 是 以 canvas 画布 的 左上 角 为 箭 卡 尔 坐标 系 的 原 
点 ， 且 y 轴 的 正方 向 向 下 ，X 轴 的 正方 向 向 右 。 


笔画 停 点 (lineTo()) 


同 理 ， context.lineTo(600, en) 。 这 和 句 的 意思 是 从 上 一 笔 的 停止 点 绘制 m 
(600,600) 这 里 。 不 过 要 清楚 ， 这 里 的 moveTo()'^lineTo() 都 只 是 状态 而 已 ， 
规划 ， 是 我 准备 要 画 ， 还 没有 开始 画 ， 只 是 一 个 计划 而 已 ! 


选择 画笔 


这 里 我 们 暂且 只 设置 一 下 画笔 的 颜色 和 粗细 。 
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context.lineWidth = 5 条 ) 的 粗细 为 5 px » 


context.strokeStyle = "4AA394C" ， 这 和 句 话 的 意思 是 设置 画笔 (线条 ) 的 顾 色 为 
Kot Bo 


因为 Canvas 是 基于 状态 的 绘制 ， 所 以 我 们 在 选择 画笔 粗细 和 颜色 的 同时 ， 其 实 也 是 
选择 了 线条 的 粗细 和 颜色 。 


确定 绘制 
确定 绘制 只 有 两 种 方法 ， fill() 和 stroke() E 
者 是 指 填充 ， 后 者 是 指 描 边 。 因 为 我 们 只 是 绘制 线条 ， 所 以 只 要 描 边 就 可 以 了 。 调 


用 代码 context.stroke() PP ° 
画 一 个 线条 


不 就 一 条 线段 吗 | 废话 了 这 么 多 ! 那 我 们 就 开始 画 吧 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 从 线条 开始 </title> 
</head> 
<body> 
<div id="canvas-warp"> 
«canvas id="canvas" style="border: 1px solid #aaaaaa; 
y: block; margin. 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


context.moveTo(100,100); 
context.lineTo(600,600); 
context.lineWidth = 5; 
context.strokeStyle = "#AA394C"; 
context.stroke(); 
} 

SASCIIDE- 

«/body» 

«/html» 
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(一 直 有 人 小 伙伴 问 我 页 面 右 下 角 的 态 是 什么 鬼 ? 哦 哦 ， 之 前 忘 解释 了 ， 那 个 是 我 的 防 
AKF | O) 


我 还 标注 了 一 个 页 面 解析 图 ， 供 大 家 参考 。 





(0, 0) 





(100, 100) 


600px 


(600, 600) 


< 


800px 





这 里 我 将 原本 «canvas» 标签 中 的 width 和 height 去 掉 了 ， 但 在 
JavaScript 代 码 中 设置 了 canvas 对 象 的 width 和 height 的 属性 。 
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小 结 : 要 设置 画布 的 大 小 ， 只 有 这 两 种 方法 

1. 在 <canvas> 标签 中 设置 ; 

2. 在 JS 代码 中 设置 canvas 的 属性 
么 样 ， 是 不 是 非常 的 酷 。 接 下 来 我 们 要 加 快 脚步 了 ， 绘 制 一 个 多 线条 组 成 的 图 

。 是 不 是 感觉 自己 离 艺术 家 又 进 了 一 步 呢 ? 别 看 这 只 是 简 简 单单 的 一 条 线段 ， 这 
画 只 是 我 们 的 一 小 步 ， 但 却 是 人 类 的 一 大 步 1 G 


Ch4 多 线条 组 成 图 形 


绘制 折线 
上 一 节 中 ， 我 们 已 经 成 功 绘制 了 一 条 线段 。 那 么 ， 如 果 我 要 绘制 有 两 个 笔画 甚至 是 
很 多 笔画 的 折线 怎么 办 呢 ? 


聪明 的 小 伙伴 肯定 已 经 想到 了 ， 这 还 不 简单 ， 复 用 lineTo() 就 可 以 了 。 下 面 我 就 
献 卫 随便 画 了 一 条 优美 的 折线 ~ 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 绘 制 折 线 </title> 
</head> 
<body> 
<div id="canvas-warp"> 
«canvas id="canvas" style="border: 1px solid #aaaaaa; 
y: block; margin. 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


context.moveTo(100,100); 
context.lineTo(300,300); 
context.lineTo(100,500); 
context.linewidth = 5; 
context.strokeStyle = "#AA394C"; 
context.stroke(); 
} 

</script> 

</body> 

«/html» 
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绘制 多 条 折线 


那 同 理 ， 我 们 要 绘制 多 条 样式 各 不 相同 的 折线 怎么 办 呢 ? 比如 我 们 在 这 里 画 三 条 折 
线 ， 分 别 是 红色 、 蓝 色 、 黑 色 。 聪 明 的 小 伙伴 肯定 想到 了 ， 这 还 不 简单 ， 只 需要 平 
移 一 下 再 改 下 画笔 闫 色 就 行 了 。 代 码 格式 都 一 样 的 ， 复 制 就 可 以 了 。 代 码 如 下 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 绘 制 折线 </title> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas" style="border: 1px solid #aaaaaa; displa 
y: block; margin: 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload - function()( 


var canvas = document.getElementById("canvas"); 
canvas.width = 800; 

canvas.height = 600; 

var context = canvas.getContext("2d"); 


context .moveTo(100,100); 
context. lineTo(300, 300); 
context.lineTo(100,500); 
context.lineWidth = 5; 
context.strokeStyle = "red"; 
context.stroke(); 


context .moveTo(300, 100); 
context.lineTo(500, 300); 
context. lineTo(300,500); 
context.lineWidth = 5; 
context.strokeStyle - "blue"; 
context.stroke(); 


context.moveTo(500,100); 
context.lineTo(700,300); 
context.lineTo(500,500); 
context.linewidth = 5; 
context.strokeStyle - "black"; 
context.stroke(); 
} 

</script> 

</body> 

«/html» 








喷 ? 是 不 是 很 奇怪 ?说 好 的 先 红 色 ， 再 蓝 色 ， 再 黑色 呢 ? 怎么 全 是 黑色 了 ? 其实， 
这 里 的 原因 是 我 之 前 一 直 强 调 的 一 点 一 Canvas 是 基于 状态 的 绘制 。 


什么 意思 呢 ? 其 实 这 段 代 码 每 次 使 用 stroke() 时 ， 它 都 会 把 之 前 设置 的 状态 再 绘 
制 一 遍 。 第 一 次 stroke() 时 ， 绘 制 一 条 红色 的 折线 ; 第 二 次 stroke() 时 ， 会 

再 重新 绘制 之 前 的 那 条 红色 的 折线 ， 但 是 这 个 时 候 的 画笔 已 经 被 更 换 成 蓝 色 的 了 ， 

所 以 画 出 的 折线 全 是 蓝 色 的 。 换 言 之 ， strokeStyle 属性 被 覆盖 了 。 同 理 ， 第 三 
次 绘制 的 时 候 ， 画 笔 闫 色 是 最 后 的 黑色 ， 所 以 会 重新 绘制 三 条 黑色 的 折线 。 所 以 ， 

这 里 看 到 的 三 条 折线 ， 其 实 绘制 了 3 次 ， 一 共 绘制 了 6 条 折线 。 


那么 ， 我 想 绘制 三 条 折线 ， 难 道 就 没有 办 法 了 吗 ? 艺术 家 之 魂 到 此 为 止 了 么 ? 没 救 
还 有 办 法 。 
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使 用 beginPath() 开始 绘制 


为 了 让 绘制 方法 不 重复 绘制 ， 我 们 可 以 在 每 次 绘制 之 前 加 上 beginPath() ， 代 表 
下 次 绘制 的 起 始 之 处 为 beginPath() 之 后 的 代码 。 我 们 在 三 次 绘制 之 前 分 别 加 
上 context.beginPath() 。 


<!DOCTYPE html» 
«html lang-"zh"» 
«head» 
«meta charset="UTF-8"> 


<title> 绘 制 折线 </title> 
</head> 
<body> 
<div id="canvas-warp"> 

«canvas id="canvas" style="border: 1px solid #aaaaaa; 
y: block; margin: 50px auto;"> 

你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 

«/canvas» 

«/div» 


«script» 
window.onload = function(){ 
var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context = canvas.getContext("2d"); 


context .beginPath(); 
context.moveTo(100,100); 
context.lineTo(300,300); 
context.lineTo(100,500); 
context.lineWidth = 5; 
context.strokeStyle = "red"; 
context.stroke(); 


context.beginPath(); 
context.moveTo(300,100); 
context.lineTo(500,300); 
context.lineTo(300,500); 
context.linewidth = 5; 
context.strokeStyle - "blue"; 
context.stroke(); 


context.beginPath(); 

context .moveTo(500,100); 
context.lineTo(700,300); 
context.lineTo(500,500); 
context.linewidth = 5; 
context.strokeStyle = "black"; 
context.stroke(); 
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} 
</script> 
</body> 
«/html» 








可 以 看 到 ， 这 里 得 到 了 我 们 预想 的 结果 。 因 为 使 用 了 beginPath() ， 所 以 这 里 的 
绘制 过 程 如 我 们 所 想 的 那样 ， 只 绘制 了 三 次 ， 而 且 每 次 只 绘制 一 条 折 

线 。 beginPath() 是 绘制 设置 状态 的 起 始点 ， 它 之 后 代码 设置 的 绘制 状态 的 作用 
域 结 束 于 绘制 方法 stroke() ^ fill() 或 者 closePath() ， 至 

于 closePath() 之 后 会 讲 到 。 


所 以 我 们 每 次 开始 绘制 前 都 务必 要 使 用 beginPath() ， 为 了 代码 的 完整 性 ， 建 议 
大 家 在 每 次 绘制 结束 后 使 用 closePath() 。 大 多 数 情况 下 不 使 用 是 没有 什么 关系 
的 ， 但 是 使 用 的 话 可 以 增强 代码 的 可 读 性 以 及 意 想不到 的 效果 。 什 么 效果 呢 ?下 一 


节 我 会 介绍 。 


剧 透 一 下 ， 下 一 节 我 们 开始 绘制 矩形 | ! 怎么 样 ， 从 上 一 节 的 “一 画 ”( 线 条 ) ， 到 
这 一 节 的 “两 画 ” (折线 ) ， 以 及 下 一 节 课 的 “四 画 ”( 矩 形 ) ， 是 不 是 很 激动 呢 ?让 我 
们 向 艺术 家 之 路 继续 前 进 | © 
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Ch5 绘制 矩形 


使 用 closePath() 闭 合 图 形 
首先 我 们 用 上 节 课 的 方法 绘制 一 个 答 形 。 


<!DOCTYPE html» 
«html lang="en"> 
«head» 
«meta charset="UTF-8"> 
<title></tit les 
</head> 
<body> 
<!DOCTYPE html» 
<html lang="zh"> 
<head> 
<meta charset="UTF-8"> 
<title> #] 42% </title> 
</head> 
<body> 
«div id="canvas-warp"> 
<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 
y: block; margin: 50px auto; > 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<Sctripte 
window.onload = function()f{ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


context.beginPath(); 
context.moveTo(150,50); 
context.lineTo(650,50); 


context. 
context. 
context. 
context. 
context. 
context. 


} 
</script> 
</body> 
«/html» 
«/body» 
«/html» 


lineTo(650,550); 

lineTo(150,550); 

lineTo(150,50); // 绘 制 最 后 一 笔 使 图 像 闭合 
linewidth = 5; 

strokeStyle = "black"; 

stroke(); 





年 一 看 没 啥 问 题 ， 但 是 视力 好 的 童鞋 已 经 发 现 了 ， 最 后 一 笔 闭 合 的 时 候 有 问题 ， 导 
致 在 上 角 有 一 个 缺口 。 这 种 情况 是 设置 了 linewidth 导致 的 。 如 果 默 认 1 笔 触 的 
话 ， 是 没有 问题 的 。 但 是 笔触 越 大 ， 线 条 越 帘 ， 这 种 缺口 就 越 明 显 。 那 么 这 种 情况 


该 怎么 避免 呢 ? 


标题 已 经 剧 透 了 ， 使 用 clothPath() 财 合 图 形 。 


<!DOCTYPE html» 

«html lang="zh"> 

«head» 
«meta charset="UTF-8"> 
«title»/A #] 42% </title> 


</head> 
<body> 
<div id="Canvas-warp"> 
<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 
y: block; margin. 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 
<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.beginPath(); 
context .moveTo(150,50); 
context.lineTo(650,50); 
context.lineTo(650,550); 
context.lineTo(150,550); 
context.lineTo(150,50); // 最 后 一 笔 可 以 不 画 
context.closePath(); //t& H closePath() 闭合 图 形 


context.lineWidth - 5; 
context.strokeStyle - "black"; 
context.stroke(); 


} 
</script> 
</body> 
«/html» 
«/body» 
«/html» 





这 个 例子 结合 上 节 课 的 讲解 ， 我 们 知道 了 绘制 路 径 的 时 候 需 要 将 规划 的 路 径 使 

用 beginPath() 4 closePath() 包 庄 起 来 。 当 然 ， 最 后 一 笔 可 以 不 画 出 来 ， 直 
接 使 用 closePath() ， 它 会 自动 帮 你 闭合 的 。( 所 以 如 果 你 不 想 绘制 闭合 图 形 就 不 
可 以 使 用 closePath() ) 


给 矩形 上 色 


这 里 我 们 要 介绍 一 个 和 stroke() 同等 重要 的 方法 fill() 。 和 当初 描 边 一 样 ， 
我 们 在 十 色 之 前 ， 也 要 先 用 fillstyle 属性 选择 要 填充 的 颜色 。 


比如 我 们 要 给 上 面 的 矩形 涂 上 黄色 ， 可 以 这 样 写 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> #] 42% </title> 
</head> 
<body> 


<div id="Canvas-warp"> 


«canvas id="canvas" style="border: 1px solid #aaaaaa; 


y: block; margin: 50px auto;"> 


你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 


«/canvas» 


«/div» 


«script» 


window.onload = function(){ 


j 


var canvas - document.getElementById("canvas"); 
canvas.width - 800; 

canvas.height - 600; 

var context - canvas.getContext("2d"); 


context.beginPath(); 

context .moveTo(150,50); 
context.lineTo(650,50); 
context.lineTo(650,550); 
context.lineTo(150,550); 
context.lineTo(150,50); // 最 后 一 笔 可 以 不 画 
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context.closePath(); //t& Fl closePath() 闭合 图 形 


context.fillstyle 
context.linewidth 


"yellow"; // 选 择 油漆 桶 的 颜色 
5; 
context.strokeStyle - "black"; 


context. fill( }; // 确 定 填 充 
context.stroke(); 


</script> 


</body> 
«/html» 
«/body» 
«/html» 





这 里 需要 注意 的 是 一 个 良好 的 编码 规范 。 因 为 之 前 说 过 了 Canvas 是 基于 状态 的 绘 

制 ， 只 有 调用 了 stroke() 和 fill() 才 确 定 绘制 。 所 以 我 们 要 把 这 两 行 代码 放 

在 最 后 ， 其 余 的 状态 设置 的 代码 放 在 它们 之 前 ， 将 状态 设置 与 确定 绘制 的 代码 分 隔 
开 。 增 强 代 码 的 可 读 性 。 


大 家 一 定 发 现 了 ， 绘 制 矩 形 其 实 都 是 这 样 的 四 笔 ， 我 们 每 次 用 这 种 笨 方 法 画 佐 形 都 
要 和 画 这 四 笔 有 多 麻烦 ， 如 果 我 们 要 花 10 个 和 矩形 ?100 个? 1000 个 ?都 这 样 写 ， 代 码 
会 腓 肿 ， 复 用 性 很 低 。 这 里 ， 我 们 可 以 使 用 JavaScript 封 装 这 些 方法 。 我 们 知道 ， 
一 个 矩形 可 以 由 它 的 左上 角 坐 标 和 其 长 帘 唯 一 确定 。 


JavaScript 4 % 


这 里 我 们 介绍 一 下 JavaScript 函 数 。 如 果 有 基础 的 同学 可 以 跳 过 这 一 大 段 ， 直 接 看 
后 面 的 。 


E kk 


JavaScript 和 ActionScript 语言 的 函数 声明 调用 一 样 ， 都 是 编程 语言 中 最 简单 的 。 
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函数 的 作用 ， 可 以 写 一 次 代码 ， 然 后 反复 地 重用 这 个 代码 。 如 :我 们 要 完成 多 组 数 和 
的 功能 。 


var sum; 
sum = 3+2; 
alert(sum); 


sum=7+8 ; 
alert(sum); 


// 不 停 重复 两 行 代码 


如 果 要 实现 8 组 数 的 和 ， 就 需要 16 行 代码 ， 实 现 的 越 多 ， 代 码 行 也 就 越 多 。 所 以 我 
们 可 以 把 完成 特定 功能 的 代码 块 放 到 一 个 函数 里 ， 直 接 调 用 这 个 函数 ， 就 省 去 重复 
输入 大 量 代码 的 麻烦 。 


使 用 部 数 完成 : 


function add2(a,b){ 
sum = a + b; 
alert(sum); 

I AN Dc po GP 


add2(3,2); 
add2(7,8); 
// REAR BART VA 
定义 函数 


如 何 定义 一 个 函数 呢 ? 看 看 下 面 的 格式 : 


function 函数 名 ( ) 


L 
函数 体 ， 


function 定 义 函 数 的 关键 字 ，* 函 数 名 "你 为 函数 取 的 名 字 ,函数 体 "替换 为 完成 特定 
功能 的 代码 。 
函数 调用 


函数 定义 好 后 ， 是 不 能 自动 执行 的 ， 需 要 调用 它 ， 直 接 在 需要 的 位 置 写 函 数 名 。 一 
般 有 两 种 方式 : 


e 第 一 种 情况 : 在 «script» 标签 内 调用 。 


«script» 
function tcon() 
{ 

alert(" 茶 总 你 学 会 函数 调用 了 1")，; 
} 
tcon(); // 调 用 函数 ， 直 接 写 函数 名 。 
</script> 


e 第 二 种 情况 : 在 HTML 文 件 中 调用 ， 如 通过 点 击 按钮 后 调用 定义 好 的 函数 。 
这 种 情况 以 后 用 到 了 再 说 。 
有 参数 的 函数 


格式 如 下 : 


function AA £(ZX1,43432) 


i 
函数 代码 


Ww 


注意 :参数 可 以 多 个 ， 根 据 需 要 增 减 参数 个 数 。 参 数 之 间 用 (有 各 号 ，) 隔 开 。 


按照 这 个 格式 ， 函 数 实现 任意 两 个 数 的 和 应 该 写成 : 


function add2(x,y) 
t 


sum = xX + y; 
document .write(sum); 


x 和 y 则 是 函数 的 两 个 参数 ， 调 用 函数 的 时 候 ， 我 们 可 通过 这 两 个 参数 把 两 个 实际 的 
加 数 传递 给 函数 了 。 


例如 ，add2(3，4) 会 求 3+4 的 和 ，add2(60,20) 则 会 求 出 60 和 20 的 和 。 
返回 值 函数 


function add2(x,y) 
sum = x + y; 
return sum; // 返 回 函 数值 , return 后 面 的 值 叫 做 返回 值 。 


这 里 的 return 和 其 他 语言 中 的 一 样 ， 但 是 在 JS 或 者 AS 等 弱 类 型 语言 中 ， 返 回 值 类 型 
是 不 需要 写 到 函数 声明 里 的 。 


至 此 ， 我 们 把 JavaScript 函 数 也 顺便 系统 的 说 了 一 下 。 下 面 回 到 正题 ~ 


我 们 也 可 以 封装 一 下 我 们 的 和 矩形， 代码 如 下 : 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<tit1e> 封 装 绘制 矩形 方法 </tit1e> 
</head> 
<body> 
«div id="canvas-warp"> 
<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 
Yy: block? margin: 50px auto > 


你 的 浏览 器 居然 不 支持 Canvas ? | 赶快 换 一 个 吧 | | 


</canvas> 


</div> 


<script> 


window.onload = function()( 


var canvas - document.getElementById("canvas"); 
canvas.width = 800; 

canvas.height = 600; 

var context = canvas.getContext("2d"); 


drawRect(context, 150, 50, 50, 50, "red", 5, "blue"); 
drawRect(context, 250, 50, 50, 50, "green", 5, "red"); 
drawRect(context, 350, 50, 50, 50, "yellow", 5, "black") 


function drawRect(cxt, x, y, width, height, fillColor, borde 


rWidth, 


} 


borderColor){ 

cxt.beginPath(); 

cxt.moveTo(x, y); 

cxt.lineTo(x * width, y); 
cxt.lineTo(x + width, y + height); 
cxt.lineTo(x, y * height); 
cxt.lineTo(x, y); 

cxt.closePath(); 


cxt.lineWidth = borderWidth; 
cxt.strokeStyle - borderColor; 
cxt.fillStyle = fillColor; 


co oT EE). 
cxt.stroke(); 


</ Script 


</body> 
</html> 
</body> 
</html> 








使 用 rect() 方 法 绘制 矩形 


KBR BFE eH OAK > PVA Canvas APIl 中 已 经 帮 我 们 封装 好 了 一 个 绘制 矩 
形 的 方法 rect() 。 这 个 方法 接收 4 个 参数 x, y, width, height， 实 际 调用 时 也 
就 是 





context.rect(x, y, width, height); 


基于 此 ， 我 们 帮 有 刚才 封装 的 方法 优化 一 下 。 


function drawRect(cxt, x, y, width, height, fillColor, 


th, borderColor){ 


cxt.beginPath(); 

cxt.rect(x, y, width, height); 
//cxt.closePath(); 可 以 不 用 closePath() 
cxt.linewidth = borderWidth; 
cxt.strokeStyle - borderColor; 
cxt.fillStyle - fillColor; 

cxt LIO 

cxt.stroke(); 


调用 封装 方法 ， 绘 制 魔 性 图 像 


还 记得 我 们 第 三 


好 ; 我 们 就 拿 它 开 刀 r 练 练 手 , 2h98 刚 封装 好 的 方法 活动 活动 筋骨 8 


节 开 头 那 个 魔 性 的 图 像 吗 ? 


<!DOCTYPE html» 
«html lang="zh"> 


«head» 


borderwid 


«meta charset="UTF-8"> 

<title> 绘 制 魔 性 图 形 </title> 
</head> 
<body> 
<div id="canvas-warp"> 

«canvas id-"canvas" style="border: 1px solid #aaaaaa; displa 
Yy: block? margin: 50px auto; > 

你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 

</canvas> 

</div> 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


context.beginPath(); 
context.rect(0, 0, 800, 600); 
context.fillStyle = "#AA9033"; 


context.fill(); 


context.beginPath(); 
for(var 1=0; i«-20; i++){ 
drawwhiteRect(context, 200 + 10 * i, 100 + 10 * i, 4 
00 - 20 * i, 400 - 20 * i); 
drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 3 
90:20 * 1, 390 - 20 * 1) 
} 


context.beginPath(); 
context.rect (395, 295, 5, 5); 
context.fillStyle = "black"; 
context.linewidth = 5; 


context. fill(); 
context.stroke(); 


function drawBlackRect(cxt, x, y, width, height){ 
cxt.beginPath(); 
cxt.rect(x, y, width, height); 


cxt.lineWidth = 5; 
cxt.strokeStyle - "black"; 


cxt.stroke(); 


function drawwhiteRect(cxt, x, y, width, height)( 
cxt.beginPath(); 
cxt.rect(x, y, width, height); 


cxt.linewidth = 5; 
cxt.strokeStyle = "white"; 


cxt.stroke(); 
} 
=</SCript> 
</body> 
</html> 
</body> 
</html> 








ew? 


ga 
是 不 是 很 有 魔 性 ? 是 不 是 非常 的 酷 ? 这 段 代码 就 不 花 篇 幅 解 释 了 ， 大 家 自己 课 下 琢 
磨 琢 应 ， 也 可 以 尝试 着 用 已 经 学 过 的 知识 去 绘制 一 个 酷 酷 的 图 像 。 这 节 课 内 容 有 点 
多 ， 其 实 也 只 是 介绍 了 四 个 属性 和 方法 
一 一 closePath() ^ fillstyle ^ fill() ^ rect() ， 还 有 一 个 扩展 的 
JavaScript da Zt vt AF o 


好 了 ， 多 花 点 时 间 消 化 消化 。 然 后 我 们 带 着 我 们 完成 的 艺术 品 ， 继 续 前 进 ~ 图 
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Ch6 线条 的 属性 


线条 属性 概述 
线条 的 属性 共有 以 下 四 个 : 


1、lineCap 属 性 
lineCap 定义 上 下 文中 线 的 端点 ， 可 以 有 以 下 3 个 值 。 


e butt: 默认 值 ， 端 点 是 重 直 于 线段 边缘 的 平和 直 边 缘 。 
e round : 端点 是 在 线段 边缘 处 以 线 宽 为 直径 的 半圆 。 
e square : 端点 是 在 选段 边缘 处 以 线 宽 为 长 、 以 一 半 线 宽 为 宽 的 矩形 


o 


2 ^ lineJoin 4 t= 


lineJoin 定义 两 条 线 相交 产生 的 拐角 ， 可 将 其 称 为 连接 。 在 连接 处 创建 一 个 填充 三 
角形 ， 可 以 使 用 lineJoin 设置 它 的 基本 属性 。 


e miter : 默认 值 ， 在 连接 处 边缘 延长 相 接 。miterLimit 是 角 长 和 线 宽 所 允许 的 最 
大 比例 (默认 是 10)。 

e bevel : 连接 处 是 一 个 对 角 线 斜 角 。 

e round : 连接 处 是 一 个 圆 。 


3^ AW, 

lineWidth 定义 线 的 宽度 (默认 值 为 1.0) ° 
4、 笔 触 样式 

strokeStyle 定义 线 和 形状 边框 的 颜色 和 样式 。 


后 面 两 个 前 面 已 经 说 过 了 ， 这 里 我 们 着 重 来 看 看 前 两 个 属性 。 


线条 的 帽子 lineCap 


废话 不 多 说 ， 直 接 上 代码 看 效果 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 线 条 的 帼 子 </title> 
</head> 
<body> 
<div id="canvas-warp"> 
«canvas id-"canvas" style="border: ipx solid #aaaaaa; displa 
y: block; margin: 50px auto; > 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


context.linewidth = 50; 
context.strokeStyle = "#1BAAAA"; 


context.beginPath(); 
context.moveTo(100,100); 
context.lineTo(700,100); 
context.lineCap - "butt"; 
context.stroke(); 


context.beginPath(); 
context.moveTo(100,300); 
context.lineTo(700,300); 
context.lineCap - "round"; 
context.stroke(); 


context.beginPath(); 
context.moveTo(100,500); 


context.lineTo(700,500); 
context.lineCap - "square"; 
context.stroke(); 


// 下 面 画 两 个 基准 线 方便 观察 
context.lineWidth = 3; 
context.strokeStyle - "black"; 


context.beginPath(); 
context.moveTo(100,0); 
context.lineTo(100,600); 
context.moveTo( 700,0); 
context.lineTo(700,600); 
context.stroke(); 


} 
</script> 
</body> 
«/html» 








这 里 我 还 做 了 两 条 平行 线 做 一 下 参考 ， 这 样 一 眼 就 能 看 清 linecap 三 个 值 的 特 
点 。 但 要 注意 ， 这 个 帽子 只 在 线条 的 端点 处 起 作用 ， 哪 怕 是 折 点 很 多 的 折线 ， 也 仅 
仅 是 在 开始 和 终止 的 两 个 端点 带 帽 子 。 如 果 想 改变 线条 折 点 (两 个 线段 的 连接 处 ) 的 
样式 ， 那 就 要 用 到 下 面 的 lineJoin 属性 。 


线条 的 连接 LineJoin 


废话 不 多 说 ， 直 接 上 代码 看 效果 。 这 段 代码 改 自 4-3， 只 是 设置 了 一 下 连接 的 属 
性 o 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
<meta charset="UTF-8"> 
<title> 线 条 的 连接 </title> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas" style="border: 1px solid #aaaaaa; displa 
y: block; margin: 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


context.beginPath(); 
context.moveTo(100,100); 
context.lineTo(300,300); 
context.lineTo(100,500); 
context.lineJoin - "miter"; 
context.linewidth = 20; 
context.strokeStyle = "red"; 


context. 


context. 


context 


context. 
context. 
context. 
context. 
context. 
context. 


context. 
context. 
context. 
context. 
context. 
context. 
context. 
context. 
} 
</script> 
</body> 
«/html» 
9 6-2 


stroke(); 


beginPath(); 


.moveTo(300,100); 


lineTo(500,300); 
lineTo(300,500); 
lineJoin = "bevel"; 
linewidth = 20; 
strokeStyle = "blue"; 
stroke(); 


beginPath(); 
moveTo(500,100); 
lineTo(700, 300); 
lineTo(500,500); 
lineJoin = "round"; 
linewidth = 20; 
strokeStyle = "black"; 
stroke(); 








看 不 清 的 童鞋 自己 放大 网 页 或 者 自己 将 代码 的 线 宽 调 宽 一 点 。 


这 里 有 一 个 很 隐蔽 的 属性 ， 就 是 当 lineJoin 设置 为 miter 时 (EA) ， 会 解锁 一 
个 成 绩 ， 可 以 使 用 miterLimit 属性 。 


举 个 例子 看 看 。 


<!DOCTYPE html» 
«html lang-"zh"» 
«head» 
«meta charset="UTF-8"> 
<title>miterLimit</title> 
</head> 
<body> 
«div id="canvas-warp"> 
<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 
y: block? margin: 50px auto; > 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 


canvas.width = 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 


context.beginPath(); 
context.moveTo(100,100); 
context.lineTo(300,300); 
context.lineTo(100,500); 
context.lineJoin - "miter"; 
context.miterLimit - 10; 
context.linewidth = 5; 
context.strokeStyle - "red"; 
context.stroke(); 


context.beginPath(); 

context .moveTo(300, 200); 
context.lineTo(500,300); 
context. lineTo(300, 400); 
context.lineJoin = "miter"; 
context.miterLimit = 10; 
context.linewidth = 5; 
context.strokeStyle = "blue"; 
context.stroke(); 


context.beginPath(); 
context .moveTo(500, 290); 
context.lineTo(700,300); 
context.lineTo(500,310); 
context.lineJoin - "miter"; 
context.miterLimit - 10; 
context.linewidth = 5; 
context.strokeStyle - "black"; 
context.stroke(); 
} 

«/script» 

«/body» 

«/html» 








会 发 现 ， 这 个 miterLimit 规定 了 一 个 自动 填充 连接 点 的 极限 值 。 如 果 超 过 
值 ， 会 导致 lineJoin 属性 失效 ， 会 从 miter BR bevel。 可 以 看 出 来 ， 这 个 4 
和 线 宽 以 及 夹 角 有 关 ， 具 体 是 啥 关系 。 看 下 图 。 


- 
met 
一 
a 


: miterLimit 
width 





可 以 看 到 ， 关 系 有 点 复杂 。 有 兴趣 的 小 伙伴 可 以 推导 一 下 这 个 值 与 线 帘 、 夹 角 的 函 


RE 
数 关系 。 其 实 ， 大 多 时 候 用 不 到 这 个 隐藏 属性 ， 即 便 用 到 了 也 是 赁 感觉 写 个 数 然后 
不 满意 再 调试 即 可 。 
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实际 在 画布 上 绘制 线段 时 ， 会 有 一 些 奇 怪 的 现象 发 生 ， 这 里 融合 本 节 课 学 到 的 两 个 
线段 的 属性 讲解 一 个 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>miterLimit</title> 
</head> 
<body> 
<div id="Ccanvas-warp"> 
<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 
y: block; margin: 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 
800; 
600; 
canvas.getContext("2d"); 


canvas.width - 
canvas.height - 
var context - 


// 实例 1; DURA, HALL, ABEL 


context.beginPath(); 


context. 
context. 
context. 
context. 
context. 
context. 
context. 
context. 


// 实例 2: 
context. 
context. 
context. 
context. 


moveTo(0,0); 
lineTo(180,0); 
lineTo(180,180); 
lineJoin = 'bevel'; 
lineCap = 'round'; 
linewidth = 10; 
strokeStyle = "red"; 
stroke(); 


圆 形 端点 ， 斜 角 连 接 ， 不 在 画布 左上 和 角 
beginPath(); 
moveTo(300, 200); 
lineTo(480,200); 
lineTo(480,380); 


context.lineJoin = 'bevel'; 
context.lineCap = 'round'; 
context.lineWidth = 10; 
context.strokeStyle = "blue"; 
context.stroke(); 


// 实例 3; 平 直 端点 , 圆 形 连 接 , 不 在 画布 左上 角 
context.beginPath(); 
context.moveTo(600, 400); 
context.lineTo(780,400); 
context.lineTo(780,580); 
context.lineJoin - 'round'; 
context.lineCap = 'butt'; 
context.linewidth = 10; 
context.strokeStyle = "black"; 
context.stroke(); 


} 
</script> 
</body> 
«/html» 








3 个 线段 和 连接 的 实例 有 助 于 说 明 在 画布 上 绘制 线段 时 不 同属 性 的 组 合 。 


实例 1 尝试 从 画布 左上 角 开 始 绘制 ， 结 果 发 生 了 一 个 奇怪 的 现象 。Canvas 路 径 在 
x 轴 和 y 轴 方 向 上 都 绘制 到 了 起 点 的 外 侧 。 由 于 这 个 原因 实例 1 上 面 的 线 看 起 来 要 
细 些 。 另 外 ， 左 上 角 水 平 部 分 中 国 形 端点 也 无 法 看 到 ， 它 们 都 被 绘制 到 了 屏幕 之 外 
的 负 值 坐标 区 域 。 此 外 ， lineJoin 定义 的 对 角 线 斜 角 也 没有 绘 出 


实例 2 调整 了 例子 1 中 出 现 的 问题 ,将 起 始点 离开 左上 角 。 这 样 就 绘制 出 了 完整 的 
KPR HELAK linecap FA lineJoin 都 被 绘制 出 来 了 。 


实例 3 显示 了 去 掉 linecap 设置 后 的 默认 端点 效果 ,并 且 将 lineJoin 调整 为 

圆 角 。 

至 此 ， 线 条 的 所 有 内 容 我 们 已 经 说 完了 。 这 个 看 起 来 很 简单 的 一 个 线条 ， 原 来 还 有 
多 内 容 ! 艺术 家 可 不 是 那么 好 当 的 ， 不 过 想必 也 激发 了 童鞋 们 的 求知 欲 。 

o 少 内 容 等 待 着 我 们 去 发 现 ? 这 是 一 个 开始 ， 让 我 们 继续 前 行 ! O 


Ch7 22 7L f G. 
艺术 离 不 开 色 彩 ， 今 天 咱们 来 介绍 一 下 填充 颜色 ， 体 会 一 下 色彩 的 魅力 。 
填充 颜色 主要 分 为 两 种 : 


1. 基本 颜色 
2. 渐变 颜色 (又 分 为 线性 渐变 与 径 向 渐变 ) 


我 们 一 个 个 来 看 。 
填充 基本 顾 色 


Canvas fillstyle 属性 用 来 设置 画布 上 形状 的 基本 颜色 和 填充 。 fillstyle 使 
用 简单 的 颜色 名 称 。 这 看 起 来 非常 简单 ， 例 如 : 


context.fillStyle = "red"; 


下 面 是 出 自 HTML4 规范 的 可 用 颜色 字符 串 值 列表 ， 共 十 六 个 。 由 于 HTML5 没有 
修改 专属 的 颜色 ，HTML4 的 颜色 都 可 以 在 HTML5 中 正确 显示 。 


名 称 名 称 字符 串 “ 进 制 数字 字符 
黑色 Black #000000s 
绿色 Green #008000 
银色 Silver #COCOCO 
石灰 色 Lime #OOFFOO 
灰色 Gray #808080 
BA e, Olive #808000 
白色 White ZFFFFFF 
黄色 Yellow #FFFFOO 
RG, Maroon #800000 
海蓝 色 Navy #000080 
红色 Red #FF0000 
蓝 色 Blue #0000FF 
紫色 Purple #800080 
深蓝 绿色 Teal #008080 
紫红 色 Fuchsia #FFOOFF 
浅 蓝 绿色 Aqua #00FFFF 


所 有 这 些 颜 色 值 都 可 以 应 用 到 strokestyle 属性 和 fillstyle 属性 中 。 
好 了 ， 我 来 总 结 一 下 击 充 基本 色 的 方法 : (也 可 用 于 strokestyle St) 


(1) AREF PAA © 
context.fillStyle = "red"; 
(2) 使 用 十 六 进 制 数字 字符 串 填充 。 


context.fillStyle = "ZFF0000"; 


(3) 使 用 十 六 进 制 数字 字符 串 简 写 形 式 填充 。 


context.fillStyle = "#F00"; 
(4) 使 用 rgb() 方法 设置 颜色 。 
context.fillStyle = "rgb(255,0,0)"; 
(5) 使 用 rgba() 方法 设置 颜色 。 
context.fillStyle = "rgba(255,0,0,1)"; 
此 方法 最 后 一 个 参数 传递 的 是 alpha 值 ， 透 明度 范围 为 1 (不 透明 ) ~0 GEA) 。 
(6) 使 用 hsl() 方法 设置 颜色 。 
context.fillStyle = "hsl(0,100%, 50%)"; 
HSL 即 是 代表 色相 (H) ， 人 饱和 度 (S) ^ WE (L) 三 个 通道 的 颜色 。 
(7) 使 用 hsla() 方法 设置 颜色 。 


context.fillStyle = "hsla(0,1009,5096, 1)"; 
VA E7 6] ARA AR 38 TG" HFFOO000" 3X 4» 2x & © 
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在 画布 上 创建 渐变 填充 有 两 个 基本 选项 : 线性 或 径 向 。 线 性 渐变 创建 一 个 水 平 、 重 
直 或 者 对 角 线 的 填充 图 委 。 径 向 渐变 自 中 心 点 创建 一 个 放射 状 填充 。 填 充 渐 变形 状 


分 为 三 步 : 添加 渐变 线 ， 为 渐变 线 添加 关键 色 ， 应 用 渐变 。 下 面 是 它们 的 一 些 示 
例 o 


线性 渐变 


三 步 走 战略 : 


1. 添加 渐变 线 : 


var grd = context.createLinearGradient(xstart,ystart, xend, ye 
nd); 


2. 为 渐变 线 添加 关键 色 (类 似 于 颜色 断 点 ) : 


grd.addColorStop(stop, color); 


这 里 的 stop 传 递 的 是 0~ 1 的 浮 点 数 ， 代 表 断 点 到 (xstart,ystart) 的 距离 占 整个 渐变 
色 长 度 是 比例 。 


1. 应 用 渐变 : 


context.fillStyle = grd; 
context.strokeStyle - grd; 


写 个 代码 来 看 看 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<tit1le> 填 充 线性 渐变 </tit1Le> 
</head> 
<body> 
«div id="canvas-warp"> 
<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 
Y: block? margin: 50px auto: > 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 


var context = canvas.getContext("2d"); 


context.rect(200,100, 400, 400); 


// 添 加 渐变 线 


var grd = context.createLinearGradient(200, 300, 600, 300); 


// 添 加 颜色 断 点 
grd.addColorStop(0, black"); 
grd.addColorStop(0.5, white"); 
grd.addColorStop(1," black"); 


// 应 用 渐变 
context.fillStyle = grd; 


context .fill(); 


} 
«/script» 
«/body» 
«/html» 





我 觉得 有 必要 做 一 个 图 解 ， 方 便 大 家 一 次 性 理解 渐变 。 





locaihost:63342/Canvas/7/7-1.nim 


SA: onm. Me BA: 0.5 位 置 ， 自 色 su M. RA 


A (200, 300) ASIBRIT IS B (600, 300) 





为 了 方便 理解 ， 建 议 把 渐变 线 看 成 是 一 个 有 向 线段 。 如 果 熟 悉 PS 等 绘图 工具 ， 用 过 
其 中 的 渐变 色 设置 ， 应 该 会 很 好 理解 。 


这 里 渐变 线 的 起 点 和 终点 不 一 定 要 在 图 像 内 ， 磊 色 断 点 的 位 置 也 是 一 样 的 。 但 是 如 
果 图 像 的 范围 大 于 渐变 线 ， 那 么 在 渐变 线 范 围 之 外 ， 就 会 自动 填充 离 端点 最 近 的 断 
点 的 颜色 。 


这 里 配合 两 个 补充 函数 再 举 一 例 。 


绘制 矩形 的 快捷 方法 


fillRect(x,y,width,height) 


^ 


stroke(x, y,width,height) 


。 这 两 个 函数 


可 以 分 别 看 做 rect() 与 fill() 以 及 rect() 与 stroke() 的 组 合 。 
为 rect() 仅仅 只 是 规划 路 径 而 已 ， 而 这 两 个 方法 确实 实 实在 在 的 绘制 。 


<!DOCTYPE html» 

«html lang="zh"> 

«head» 
<meta charset="UTF-8"> 
«title22E AAEM </title> 

</head> 

<body> 

«div id="Canvas-warp"> 


<canvas id="canvas" style="border: ipx solid #aaaaaa; displa 


y: block; margin: 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 
800; 
canvas.height - 600; 


canvas.getContext("2d"); 


canvas.width - 


var context - 


// 添 加 渐变 线 


var grd = context.createLinearGradient(100, 300, 700, 300); 


// T Ja HEH A 


grd.addColorStop(0,"olive"); 
grd.addColorStop(0.25, "maroon"); 
grd.addColorStop(0.5,"aqua"); 
grd.addColorStop(0.75,"fuchsia"); 


grd.addColorStop(0.25, teal"); 


// 应 用 渐变 
context.fillStyle = grd; 
context.strokeStyle - grd; 


context.strokeRect(200,50,300,50); 
context.strokeRect(200,100,150,50); 
context.strokeRect(200,150,450,50); 


context.fillRect(200,300,300,50); 
context.fillRect(200,350,150,50); 
context.fillRect(200,400,450,50); 


context.fillRect(0,550,800,25); 


} 
</SCript> 
</body> 
</html> 


localhost:63342/Canvas/7/7-2.ntr 





这 两 个 页 面 都 是 水 平 渐变 ， 但 是 要 清楚 线性 渐变 不 一 定 是 水 平 的 ， 方 向 可 以 是 任意 
的 ， 通 过 渐变 线 的 端点 来 设置 方向 。 


径 向 渐变 
同样 是 三 步 走 战略 ， 只 不 过 是 第 一 步 的 所 用 方法 变 了 。 


1. 添加 渐变 圆 : 


var grd = context.createRadialGradient(xO0,y0,r0,x41,y1,r1); 


2. 为 渐变 线 添 加 关键 色 (类 似 于 颜色 断 点 ) : 


grd.addColorStop(stop,color); 


3. 应 用 渐变 : 


context.fillStyle = grd; 
context.strokeStyle - grd; 


线性 渐变 是 基于 两 个 端点 定义 的 ， 但 是 径 向 渐变 是 基于 两 个 圆 定 义 的 。 


我 们 把 示例 7-2 改 写 一 下 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<tit1e> 填 充 径 向 渐变 </tit1e> 
«/head» 
«body» 
«div id="canvas-warp"> 
«canvas id-"canvas" style="border: 1px solid #aaaaaa; displa 
y: block; margin: 50px auto; "> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 


// 添 加 渐变 线 
var grd = context.createRadialGradient(400,300,100,400,3 
00, 200); 


/ T Ja ER eT es. 
grd.addColorStop(0,"olive"); 
grd.addColorStop(0.25, "maroon"); 
grd.addColorStop(0.5,"aqua"); 
grd.addColorStop(0.75,"fuchsia"); 
grd.addColorStop(0.25,"teal"); 


// 应 用 渐变 
context.fillStyle = grd; 


context.fillRect(100,100,600,400); 


} 
</script> 
</body> 
«/html» 





怎么 感觉 这 个 颜色 搭配 那么 的 .……… 算 了 ， 这 个 就 叫做 艺术 。 


createRadialGradient(x0,y0,r0,x1,y1,r1); AKAM T Ea RA Fe 5 R 
的 范围 ， 即 两 圆 之 间 的 渐变 。 


总 结 一 下 ， 这 节 课 我 们 学 习 

了 fillStyle ^ createLinearGradient() ^ createRadialGradient() ^ 
addColorStop() ^ fillRect() ^ strokeRect() 等 属性 和 方法 ， 详 细 介 绍 了 
填充 基本 色 、 线 性 渐变 、 径 向 渐变 。 


好 了 ， 现 在 学 会 了 上 色 ， 那 么 尽情 的 使 用 色彩 ， 绘 制 出 属于 我 们 自己 的 艺术 品 吧 ! 
e 


Ch8 卉 充 样 式 


createPattern() 简介 


纹理 其 实 就 是 图 案 的 重复 ， 卉 充 图 案 通 过 createPattern() 函数 进行 初始 化 。 它 
需要 传 进 两 个 参数 createPattern(img,repeat-style) ， 第 一 个 是 Image 对 象 实 
例 ， 第 二 个 参数 是 String 类 型 ， 表 示 在 形状 中 如 何 显示 repeat 图 案 。 可 以 使 用 这 个 
函数 加 载 图 像 或 者 整个 画布 作为 形状 的 填充 图 案 。 


有 以 下 4 种 图 像 填 充 类 型 : 


e 平面 上 重复 repeat; 
e X 轴 上 重复 : repeat-x; 
e y 轴 上 重复 : repeat-y; 
e 不 使 用 重复 : no-repeat; 


其 实 createPattern() 的 第 一 个 参数 还 可 以 传 入 一 个 canvas 对 象 或 者 video 对 
象 ， 这 里 我 们 只 讲解 Image 对 象 ， 其 余 的 大 家 自己 尝试 。 

创建 并 填充 图 和 

首先 看 一 下 怎么 加 载 图 像 : 


1. 创建 Image 对 象 
2. 为 Image 对 象 指定 图 片 源 


代码 如 下 : 
var img = new Image(); //&|:x£ Image Z 
img.src = "8-1.jpg"; // 为 Image 对 象 指定 图 片 源 


扩展 : HTML 中 的 相对 路 径 
/目录 或 文件 名 ' 或 者 ' 目 录 或 文件 名 ' 是 指 当 前 操作 的 文件 所 在 目录 的 路 径 


'../ 目 录 或 文件 名 ' 是 指 当 前 所 操作 的 文件 所 在 目录 的 上 一 级 目录 的 路 径 


填充 纹理 


之 后 填充 纹理 : 


var pattern = context.createPattern(img, "repeat"); 
context.fillStyle = pattern; 


RN) BHAA REO OE AGE E EARP p 8g KC ARTE] SUE FZ 
注意 的 是 ， 选 择 图 片 时 一 定 要 选择 那 种 左右 互通 ， 上 下 互通 的 图 片 做 为 纹理 ， 这 样 
看 上 去 才 不 会 有 不 自然 的 短 接 处 。 





安利 一 个 网 站 。 这 张 图 取 自 优美 图 网 ， 这 个 网 站 非常 赞 ， 里 面 的 图 片 非 常 漂亮 而 且 
种 类 繁多 ， 最 重要 的 是 它 是 免费 的 ! | ! 我 从 初中 开始 就 一 直 使 用 这 个 网 站 来 找 素 
材 。 并 且 最 近 又 推出 了 APP， 有 Android 和 iOS 端 ， 推 荐 大 家 下 载 使 用 。 (这 是 个 秘 
密 ， 我 一 般 不 告诉 别人 的 。 ) 


下 面 提供 代码 。 
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<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
«title» LA -/title» 
«/head» 
«body» 
<div id="Canvas-warp"> 
<canvas id="canvas" style="border: 1px solid #aaaaaa; 
y: block; margin. 50px auto;"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 


var img new Image(); 
img.src = "8-1.jpg"; 


img.onload = function(){ 


displa 


var pattern = context.createPattern(img, "repeat"); 


context.fillStyle - pattern; 
context.fillRect(0,0,800,600); 


} 
ss 人 era 
«/body» 
«/html» 


填充 纹理 


localhost:63342/Canvas/B/8-1.htmi G 5 





这 里 使 用 了 Image 的 onload 事件 ， 它 的 作用 是 对 图 片 进行 预 加 载 处 理 ， 即 在 图 
片 加 载 完 成 后 才 立 即 除非 其 后 function 的 代码 体 。 这 个 是 必须 的 ， 如 果 不 写 的 话 ， 
画布 将 会 显示 黑屏 。 因 为 没有 等 待 图 片 加 载 完 成 就 填充 纹理 ， 导 致 浏览 器 找 不 到 图 
片 o 


这 里 使 用 了 "repeat"， 童 鞋 们 也 可 尝试 使 用 一 下 其 他 三 个 值 ， 看 看 会 有 什么 不 同 的 
效果 。 也 可 以 自己 找 一 下 其 他 的 图 片 尝试 填充 ， 看 看 效果 。 


还 有 ， 长 颈 施 是 不 是 特别 萌 ?看 来 我 们 已 经 是 个 艺术 家 了 呢 ! 这 节 内 容 很 少 ， 我们 
继续 前 进 | © 
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Ch9 绘制 标准 圆 陶 


高 级 路 径 


今天 开始 ， 我 们 就 要 征战 路 径 最 后 也 是 最 难 的 部 分 高 级 路 径 。 之 前 我 们 学 习 
的 都 是 绘制 线条 (基本 路 径 ) o dou 会 制 曲线 (高 级 路 
径 ) 的 有 关 方 法 。 





剧 透 一 下 ， 主 要 有 四 个 方法 : 


e AED: arc() 

e X AD: arcTo() 

e KNARE: quadraticCurveTo() 
e 三 次 贝 塞 尔 曲线 : bezierCurveTo() 


在 开始 之 前 ， 我 们 优化 一 下 我 们 的 作 图 环境 。 灵 感 来 自 于 上 节 课 的 纹理 ， 如 果 不 喜 
欢 这 个 背景 ， 我 在 images 目 录 下 还 提供 了 其 他 的 背景 图 ， 供 大 家 选择 。 另 外 把 所 有 
的 样式 表 都 写 在 了 <head> T» 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
<meta charset="UTF-8"> 
<title> 新 的 画布 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


} 
</script> 
</body> 
«/html» 


localhost:63342/Canvas/9/9-1.htm 





之 所 以 要 绘制 一 个 空白 的 矩形 卉 满 画布 ， 是 因为 我 们 之 前 说 过 ，canvas 是 透明 的 ， 
如 果 不 设 置 背 景色 ， 那 么 它 就 会 被 我 设置 的 <body> 纹理 所 履 盖 ， 想 要 使 其 拥有 彰 
景色 (和 白色 ) ， 只 有 绘制 矩形 覆盖 canvas 这 一 个 方法 。 


怎么 样 ， 是 不 是 非常 的 酷 ? 


使 用 arc() Zm D 9 


arc() 的 使 用 方法 如 下 : 
context.arc(x,y,radius, startAngle, endAngle, anticlockwise) 


前 面 三 个 参数 ， 分 别 是 圆心 坐标 与 圆 半 径 。 startangle ^ endAngle 使 用 的 是 
约 度 值 ， 不 是 角度 值 。 弧 度 的 规定 是 绝对 的 ， 如 下 图 。 


2 pi 
0 pi 


anticlockwise 表示 绘制 的 方法 ， 是 顺 时 针 还 是 逆 时 针 绘 制 。 它 传 入 布尔 值 ， 
true 表 示 逆 时 针 绘 制 ，false 表 示 顺 时 针 绘 制 ， 缺 省 值 为 false。 


弧度 的 规定 是 绝对 的 ， 什 么 意思 呢 ? 就 是 指 你 要 绘制 什么 样 的 圆 缴 ， 缴 度 直接 按 上 
面 的 那个 标准 卉 就 行 了 。 


比如 你 绘制 0.5pi ~ 1pi 的 圆 狼 ， 如 果 顺 时 针 画 ， 就 只 是 左下 角 那 1/4 个 圆 改 ; 如 果 
逆 时 针 画 ， 就 是 与 之 互补 的 右上 和 角 的 3/4 圆 狼 。 此 处 自己 尝试， 不 再 举例 。 


绘制 圆 角 和 矩形 


下 面 ， 我 们 结合 基本 路 径 和 高 级 路 径 的 知识 ， 绘 制 一 个 圆 角 给 形 。 


圆 角 珑 形 是 由 四 段 线条 和 四 个 1/4 圆 级 组 成 ， 拆 解 如 下 。 


( width-r , r ) 


(r,height-r) (width-r, height -r ) 
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参数 。 分 析 好 之 后 ， 直 接 敲 出 代码 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> H 4BJ«-/title» 
<style> 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 


<script> 


Ol 


window.onload = function(){ 


var canvas - document.getElementById("canvas"); 
canvas.width - 800; 

canvas.height - 600; 

var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 

context. fillRect(0,0, 800,600); 


drawRoundRect(context, 200, 100, 400, 400, 50); 
context.strokeStyle = "#0078AA"; 
context.stroke(); 


function drawRoundRect(cxt, x, y, width, height, radius){ 


cxt.beginPath(); 
cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI 


Dog 2); 


cxt.lineTo(width - radius + x, y); 
cxt.arc(width - radius + x, radius + y, radius, Math.PI 


* 3 / 2, Math.PI * 2); 


©, Math. 


cxt.lineTo(width + x, height + y - radius); 
cxt.arc(width - radius + x, height - radius + y, radius, 
E 195229): 

cxt.lineTo(radius + x, height +y); 

cxt.arc(radius + x, height - radius + y, radius, Math.PI 


* 1 / 2, Math.PI); 


j 


cxt.closePath(); 


S/ScpIpt- 


«/body» 
«/html» 


localhost:63342/Canvas/9/9-2 htm 





EKR Á Co ERU] — AL ABU > GUECR ECT E RE 00 EE o 


下 面 我 们 用 这 个 函数 来 做 点 其 他 的 事情 。 


2 ti] 204875 3X, 7 du 


对 代码 不 做 过 多 讲解 ， 大 家 自己 研究 研究 ， 建 议 自 己 动手 先 尝试 写 一 下 。 因 为 我 这 
里 采用 的 是 硬 编码 ， 所 以 不 是 很 好 ， 大 家 也 可 尝试 优化 一 下 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>2048 游 戏 界 面 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 


你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
</canvas> 
</div> 


«script» 
window.onload = function()( 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


drawRoundRect(context, 200, 100, 400, 400, 5); 
context.fillStyle = "#AA7B41"; 
context.strokeStyle = "#0078AA"; 
context.stroke(); 

context.fill(); 


for(var i = 1; i <= 4; i++){ 
for(var j 2 1; j <= 4; j++){ 
drawRoundRect(context, 200 + 16 * i+ 80 * (i - 1 
) 200 + 16°" + 80 * (j= 41), 80, 80,5), 
context.fillStyle = "#CCBFB4"; 
context.strokeStyle = "#0078AA"; 
context.stroke(); 
context. fill(); 


function drawRoundRect(cxt, x, y, width, height, radius)( 
cxt.beginPath(); 
cxt.arc(x + radius, y + radius, radius, Math.PI, Math.PI 
a EA S 
cxt.lineTo(width - radius + x, y); 
cxt.arc(width - radius + x, radius + y, radius, Math.PI 
nag 2r Math BU = 2): 
cxt.lineTo(width + x, height + y - radius); 
cxt.arc(width - radius + x, height - radius + y, radius, 


o Math.PP * T 7 2): 

cxt.lineTo(radius + x, height +y); 

cxt.arc(radius + x, height - radius + y, radius, Math.PI 

+1 f/f 2) Math ET); 
cxt.closePath(); 
} 

</script> 
</body> 
«/html» 








这 个 圆 角 和 矩形 的 函数 写 好 之 后 ， 可 以 自己 封装 进 JS 文 件 里 ， 以 后 遇 到 什么 好 的 郊 数 
都 可 以 放 进 去 ， 这 样 积 累 下 来 ， 这 个 文件 就 是 一 套 属于 自己 的 图 形 库 和 游戏 引擎 
了 ， 是 不 是 非常 的 酷 ? 


其 实 游戏 制作 是 Canvas 的 主要 用 途 ， 但 是 要 知道 每 一 个 游戏 设计 师 都 是 一 个 艺术 
家 。 是 不 是 觉得 前 途 一 片 光 明 ?让 我 们 继续 前 进 ! 
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arcTo() 


arcTo() 方法 接收 5 个 参数 ， 分 别 是 两 个 切 点 的 坐标 和 圆 狼 半径 。 这 个 方法 是 依据 
切线 画 绝 线 ， 即 由 两 个 切线 确定 一 条 统 线 。 具体 如 下 。 


arcTo(x1, y1, x2, y2, radius) 


3 Ae f CV 0 348 92 Hl — RA DL 85 Ae 5) 2: p RS S E (x1, y1) 点 的 
EAMH > May c 5 5 (x1, y1) 点 到 (x2, y2) 的 直线 相 切 。 因 此 其 通常 配 

合 Fr 或 lineTo() 使 用 。 其 能 力 是 可 以 被 更 为 简单 的 arc() 替代 的 ， 其 
复杂 就 复杂 在 绘制 方法 上 使 用 了 切 点 。 


使 用 切 点 绘制 约 线 


下 面 的 案例 我 把 切线 也 绘制 出 来 了 ， 看 的 更 清楚 一 些 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
«title»/2 $9 hA</title> 
«style» 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 


window.onload - function()( 


x 


var canvas - document.getElementById("canvas"); 
canvas.width - 800; 

canvas.height - 600; 

var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800, 600); 


drawArcTo(context, 200, 200, 600, 200, 600, 400, 


function drawAFrcTO(Cxt, x0, yO; X43, yi, x2, y2, 人 


} 


cxt.beginPath(); 
cxt.moveTo(x0, yO); 
cxt.arcTo(x1, y1, x2, y2, r); 


cxt.lineWidth = 6; 
cxt.strokeStyle = "red"; 
cxt.stroke(); 


cxt.beginPath(); 

cxt.moveTo(x0, y0); 
cxt .lineTo(x1, y1); 
cxt.lineTo(x2, y2); 


cxt.linewidth - 1; 
cxt.strokeStyle = "#0088AA"; 
cxt.stroke(); 


</script> 


</body> 
«/html» 


100); 





这 个 案例 也 很 好 说 明了 arcTo() 的 各 个 关键 点 的 作用 。 为 了 更 清楚 的 解释 ， 我 再 


标注 一 个 分 析 图 。 


(x0, y0) (x1, y1) 
切线 L1 
(x2, y2) 


切线 L2 


这 里 注意 一 下 ， arcTo() 绘制 的 起 点 是 (x0, y0)， 但 (x0, yO) T — E X D] MAY Li 
A o SES] arcTo() 函数 只 传 入 (X1, y1)fe(x2, y2)。 其 中 (x1, y1) 称 为 控制 点 ， 
(x2, y2) 是 加 缴 终 点 的 切 点 ， 它 不 一 定 在 圆 狐 上 。 但 (x0, y0)— ÈE HIE 。 


有 一 点 点 绕 ， 下 面 我 们 改变 drawArcTo() 函数 的 参数 来 试验 一 下 。 


e (x2, y2) 不 一 定 在 缴 线 上 : drawArcTo(context, 200, 100, 600, 100, 
600, 400, 400); 


e (x0, y0) 一 定 在 弧 线 上 : drawArcTo(context, 400, 100, 600, 100, 600, 
400, 400); 


插 有 意思 的 ， 它 为 了 经 过 (x0, y0) 直 接 将 切 点 和 (X0, y0) 连 接 起 来 形成 线段 。 好 执着 
87 9& 2X... 


绘制 微 信 对 话 框 


大 家 可 以 尝试 着 使 用 Canvas 绘 制 一 下 微 信 聊 天 界面 ， 作 为 练习 与 巩固 。 


9:41 AM 


WARE 





at dno 


at RGR, GATTO. AT 
大 山 压 不 住 你 ， 赠 出 个 孙 行 者 


rem 
N 


m 我 是 5B 我 怕 谁 ! 





7 JE 


ix V 4$ NS TARY > SAM ABU h ZK KRN > MAMAN Nha o 
还 有 一 些 Canvas RAPI 我 们 并 没有 说 到 ， 所 以 大 家 只 要 能 绘制 出 一 个 大 概 的 界 
面 就 算 合格 了 。 能 够 绘制 出 来 ， 也 就 基本 掌握 了 Canvas API 。 





其 实 上 述 对 话 是 生成 出 来 的 一 “ 微 信 界面 生成 器 网 页 版 "， 可 谓 是 微 商 神器 。 是 不 
是 非常 的 酷 ? 


使 用 切 点 绘制 圆 绝 


airingursb.github.io/ez/source/ d S 
k x , y F » m 


JURE: |. ARRAST. 2. S Rok REA TRE AME. RR ROD —. 


主体 界面 显示 


See MTM 


BM (FERRES) : EFO: 30 


- 
ET EEE 


B CRIURSUN SU) : 


- 
sut oe osi 


NAY MA (TERENS) : 


ALEGRE. BETH CES 
p l ETT EA ET 
HS (TERMED) e 


Sie 259088 AO RERE, ATO. nn 
aliq (FERAN) : 关山 压 不 住 你 ， 喘 出 个 孙 行 者 


Sut ose onili 


"s «s BIN CREURREMESO : 


BEN SI 
EP EE | 


WW" EZT WEF 


RFRA 
LÀ 





MSRM 


这 只 是 暑假 花 两 天 时 间 写 的 最 初版 本 ， 还 尚未 达到 发 布 的 地 步 ， 在 我 写本 节 的 时 
候 ， 这 个 网 页 的 界面 还 正在 优化 中 。 大 家 可 以 尝试 自己 动手 做 做 ， 也 可 以 关注 和 参 
考 我 的 这 个 小 项 目 github : 微 信 界面 生成 器 。 本 节 就 不 再 重复 给 出 界面 代码 了 。 


好 了 ， 学 到 这 里 基本 上 已 经 学 完了 所 有 基本 的 Canvas 绘 图 的 api， 大 家 拿 起 自己 的 
画笔 ， 自 由 的 发 挥 吧 | © 
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贝 紧 尔 曲线 


Bézier curve( 贝 塞 尔 曲 线 ) 是 应 用 于 二 维 图 形 应 用 程序 的 数学 曲线 。 曲线 定义 :起 
始点 、 终 止 点 、 控 制 点 。 通 过 调整 控制 点 ， 贝 塞 尔 曲线 的 形状 会 发 生变 化 。 1962 
年 ， 法 国 数学 家 Pierre Be6zier 第 一 个 研究 了 这 种 失 量 绘制 曲线 的 方法 ， 并 给 出 了 详 
细 的 计算 公式 ， 因 此 按照 这 样 的 公式 绘制 出 来 的 曲线 就 用 他 的 姓氏 来 命名 ， 称 为 贝 
塞 尔 曲 线 。 


这 里 我 们 不 介绍 计算 公式 ， 只 要 知道 贝 塞 尔 曲线 是 一 条 由 起 始点 、 终 止 点 和 控制 点 
所 确定 的 曲线 就 行 了 。 而 n 阶 贝 塞 尔 曲线 就 有 n-1 个 控制 点 。 用 过 Photoshop 等 绘图 
软件 的 同学 应 该 比较 熟悉 ， 因 为 其 中 的 钢笔 工具 设置 锚 点 绘制 路 径 的 时 候 ， 用 到 的 
就 是 贝 塞 尔 曲线 。 下 图 就 是 五 阶 贝 塞 尔 曲线 的 绘制 过 程 。 





是 不 是 非常 的 酷 炫 ? 


LE WX 8 


都 介绍 了 五 次 贝 塞 尔 曲 线 ， 那 二 次 的 肯定 不 在 话 下 了 。 大 家 一 定 能 想象 出 它 长 啥 
样 。 没 错 ， 就 是 下 面 这 样 。 


P 


1 


Po t=0 oP, 


在 Canvas 里 ， 二 次 贝 塞 尔 曲线 的 方法 如 下 。 


context.quadraticCurveTo(cpx, cpy,x,y); 


这 里 和 acrTo() AHWAMLA4 o PORRA > PPV dS 
B5 moveTo() X lineTo() 使 用 。P1(cpx, cpy) 是 控制 点 ，P2(X, y) 是 终止 点 ， 它 
们 不 是 相 切 的 关系 。 什 么 关系 呢 ?如果 偏 要 问 ， 我 只 好 给 出 下 面 的 公式 ...... 


P1(1-ty7H tha. ae "pma ens Pn(1-#)°t", t € [0,1] 


Hn— 








n 
n 








B(t) - ) (riam = (o) Ponts 
i=0 





n 
1 


这 么 复杂 的 函数 式 ， 那 我 们 绘图 时 ， quadraticcurveTo(cpx,cpy,x,y) 的 参数 
怎么 填 ? 了 很 简单 ， 可 以 简单 调试 直至 得 到 你 想 要 的 效果 。 或 者 使 用 一 些 工 具 。 


FN 


这 里 我 提供 一 个 很 不 错 的 在 线 转换 器 ， 界 面 如 下 。 





HBA xx o mn. sme 


anvas Quadratic Curve Example 


Q 





This demonstration shows how quadratic curves can be drawn on a canvas element. Drag the line ends or the control point to change th 
curve. 
For more information, please refer to: 


See also: 
How to Draw Bezier Curves on an HTML5 Canvas 


Disclaimer 
The code was developed by Craig Buckler of OptimalWorks net for SstePoint, com. 
This code can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated. 


. o 


pe 


这 里 我 把 三 个 控制 点 调 好 ， 变 成 一 个 大 山 的 形状 ， 右 侧 自动 生成 了 代码 ， 我 们 只 要 
复制 就 行 了 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
«title»—X JL X WA</title> 
«style» 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function(){ 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


context.linewidth = 6; 

context.strokeStyle = "#333"; 
context.beginPath(); 

context.moveTo(60, 337); 
context.quadraticCurveTo(256, 43, 458, 336); 
context.stroke(); 


Hh 


«/script» 
«/body» 
«/html» 





这 样 我 们 把 在 线 转换 工具 里 的 贝 塞 尔 曲线 搬 进 我 们 自己 的 画布 里 了 ， 是 不 是 非常 的 
8? 大 家 如 果 有 特别 难 的 曲线 没 法 用 arcTo() 绘制 ， 就 可 以 尝试 一 下 使 用 这 个 工 
具 绘 制 贝 塞 尔 曲 线 。 


本 节 的 内 容 非常 少 ,童鞋 们 不 要 停 下 脚步 ， 整理 好 行 装 ， 一 并 把 最 终 BOSS 一 一 三 
次 贝 塞 尔 曲线 消灭 掉 ! 打败 他 之 后 ， 我 们 就 是 初级 艺术 家 了 ， 是 不 是 非常 的 兴 春 ? 
让 我 们 继续 前 进 | © 


bezierCurveTo() 方法 
绘制 三 次 贝 塞 尔 曲线 代码 如 下 。 


context.bezierCurveTo(cp1x,cp1iy, cp2x,cp2y,x,y); 


这 个 方法 可 谓 是 绘制 波浪 线 的 神器 。 根 据 之 前 的 结论 ，n 阶 贝 塞 尔 曲线 就 有 n-1 个 控 
制 点 ， 所 以 三 次 贝 塞 尔 曲线 有 1 个 起 始点 、1 个 终止 点 、2 个 控制 点 。 因 此 传 入 的 6 个 
参数 分 别 为 控制 点 cp1 (cp1x, cp1y)， 控 制 点 cp2 (cp2x, cp2y)， 与 终止 点 (x, y) ° 


这 个 方法 也 是 不 用 大 家 去 掌握 参数 具体 是 怎么 填 的 ， 只 要 知道 参数 的 意义 就 行 。 
4 quadraticCurveTo() 方法 一 样 ， bezierCurveTo() 的 三 次 贝 塞 尔 曲线 网 上 

能 找到 互动 的 网 页 工具 。 这 里 提供 一 个 网 页 : Canvas Bézier Curve Example ， 
oe 





将 网 页 为 ”英文 o mn. SERENE? 


anvas Bézier Curve Example 


276, 434, 440, 233); 





This demonstration shows how bézier curves can be drawn on a canvas element. Drag the line ends or the control points to change the 
curve. 
For more information, please refer to: 
How to Draw Bezier Curves on an HTML5 Canvas 
é a a pont 
How to Draw Quadratic Curves on an HTMLS Canvas 
Disclaimer 


The code was developed by Craig Buckler of OptimalWorks net for SitePoint com 
This code can be used without any restrictions but please don't expect 24/7 support! A link back to SitePoint.com is appreciated. 





这 里 我 们 拿 XP 的 壁纸 开刀 ， 来 练习 一 下 我 们 之 前 学 习 过 的 绘制 方法 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>xP#%</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: ipx solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function()f{ 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


drawPrairie(context); 

drawSky(context); 

for(var 120; i <5; i++){ 
var x09 = 500 * Math.random() + 50; 
var yO = 200 * Math.random() + 50; 
var cO = 100 * Math.random() + 50; 
drawCloud(context, x0, y0, cO); 


jr 


function drawSky(cxt){ 
cxt.save(); 


cxt.beginPath(); 

cxt.moveTo(0, 420); 

cxt.bezierCurveTo(250, 300, 350, 550, 800, 400); 
cxt .lineTo(800,0); 

cxt .lineTo(0,0); 

cxt.closePath(); 


var lineStyle = cxt.createRadialGradient(400, 0, 50, 400 
, 0, 200); 

lineStyle .addColorStop(0, "#42A9AA"); 

lineStyle .addColorStop(1, "#2491AA"); 


cxt.fillStyle = lineStyle; 


cxt.fill(); 


cxt.restore(); 


function drawPrairie(cxt)( 
cxt.save(); 


cxt.beginPath(); 

cxt.moveTo(0, 420); 

cxt.bezierCurveTo(250, 300, 350, 550, 800, 400); 
cxt.lineTo(800, 600); 

cxt.lineTo(0,600); 

cxt.closePath(); 


var lineStyle = cxt.createLinearGradient(0, 600, 600, 0) 
lineStyle .addColorStop(0, "400AA58"); 
lineStyle .addColorStop(0.3, "#63AA7B"); 


lineStyle .addColorStop(i1, "#04AA00"); 


cxt.fillStyle - lineStyle; 


cxt.fill(); 


cxt.restore(); 


ERNER 


context: canvas.getContext("2d") 对象 


CX: 


cy: 
CW: 


ud 


云 采 X 轴 位 置 


funetion drawCloud(GcXt, Gx, cy, cw) 1 


false); 


// BRAS hi6, BR Pp m Ap OE Ñ 
var maxwidth = 800; 

// 如 果 超 过 边界 从 头 开 始 绘制 
CX = cx % maxWidth; 
// 云 条 高 度 为 宽度 的 60% 
var ch = cw * 0.6; 

// 9-362 8| A AE 


cxt.beginPath(); 
cxt.fillstyle = "white"; 
// 创 建 渐变 


var grd = cxt.createLinearGradient(0, 0, 0, cy); 
grd.addColorStop(0, 'rgba(255,255,255,0.8)'); 
gard-addColorStop(1, "rgba(255, 255,255, 0.5) 595 


cxt.fillStyle = grd; 


/ / ET R> 8. 3E 5 A T] BERE LA IRL 


CXt.arc(cx, cy, cw * 0.19, 0. 360, false): 

extraneo + cw = O08 "cy = veh 5:973 "ew 9:110, 7360 
, false); 
extranei cx + cw.) 0.9 Scy eh 0.25, cw 0. 25,. 0. S60 
, false); 


Cxl.arc(cx = cw 0.6, icy, cw 4-0. 21; 
cxt ance(eX H ew ~ O23, CY = ch ^ Gel, 


cxt.closePath(); 


0, 360, false); 
cw * 0.28, 0, 360, 


Cxt Tab 
} 
«/script» 
«/body» 
«/html» 








是 不 是 很 靖 ? 是 不 是 非常 的 酷 ! 这 个 案例 几乎 用 到 了 之 前 所 传授 给 你 们 的 所 有 武功 
一 一 三 次 贝 塞 尔 曲线 ， 径 向 渐变 ， 线 性 渐变 ， 绘 制 圆 缴 等 等 。 分 开 写 了 三 个 函数 ， 
一 个 绘制 草原 、 一 个 绘制 蓝天 、 一 个 绘制 白云 .…… 大 家 尝试 自己 实现 一 下 ， 当 做 一 
次 阶段 性 复习 ~ 


保存 和 恢复 Canvas 状 态 


这 里 还 使 用 到 了 两 个 新 方法 save() 和 restore() 。 之 前 说 过 了 canvas 是 基于 状 
态 的 绘制 (ULT PEOR ROLE OPE) 。 保 存 (推送 ) 当前 状态 到 堆栈 ， 调 用 
VA P X o 


context.save(); 


调 出 最 后 存储 的 堆栈 恢复 画布 ， 使 用 以 下 函数 。 


context.restore(); 


不 知道 大 家 壁纸 绘制 的 如 何 ， 肯 定 非常 的 酷 有 没有 ? 到 此 为 止 路 径 的 知识 和 填充 样 
式 我 们 已 经 全 部 讲 完 了 ， 大 家 也 画 出 了 很 多 或 优美 、 或 抽象 的 艺术 作品 。 不 管 怎么 
样 ， 这 是 属于 我 们 的 艺术 ， 我 们 继续 前 进 ! O 


Ch13 平移 变换 


图 形变 换 


从 今天 开始 ， 我 们 就 开始 谈 一 谈 图 形变 换 。 图 形变 换 是 指 用 数学 方法 调整 所 绘 形状 
的 物理 属性 ， 其 实质 是 坐标 变形 。 所 有 的 变换 都 依赖 于 后 台 的 数学 矩阵 运 划 ， 所 以 
我 们 只 要 使 用 变换 的 功能 即 可 ， 无 需 去 理解 这 些 运算 。 谈 到 图 形变 换 ， 不 得 不 得 说 
的 三 个 基本 变换 方法 就 是 : 


1. 平移 变换 : translate(x,y) 
2. 旋转 变换 : rotate(deg) 
3. 缩放 变换 : scale(sx,sy) 


其 实 坐 标 变形 的 本 质 是 变换 矩阵 ， 所 以 在 最 后 我 们 会 谈 一 谈 一 个 万 能 的 变换 方法 
一 一 矩阵 变换 transform() 。 那 么 ， 我 们 按部就班 ， 这 一 节 我 们 来 谈 一 谈 平移 变 
换 。 


平移 变换 translate() 


平移 变换 ， 故 名 思议 ， 就 是 一 般 的 图 形 位 移 。 比 如 这 里 我 想 将 位 于 (100° 100) 的 
矩形 平移 至 (200° 200) 点 。 那 么 我 只 要 在 绘制 矩形 之 前 加 
上 context.translate(100,100) 即 可 。 


这 里 的 translate() 只 传 入 两 个 参数 ， 其 实 就 是 新 画布 坐标 系 原 点 的 坐标 。 下 面 
结合 代码 来 看 看 效果 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
«title» T£ $4 -/title» 
«style» 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800,600); 


context.fillStyle = "#00AAAA"; 
context. fillRect(100, 100, 200,100); 


context.fillStyle = "red"; 
context.translate(100, 100); 
context. fillRect(100,100, 200,100); 


u 
</script> 
</body> 
«/html» 





这 里 的 蓝 色 矩 形 ， 是 矩形 原来 的 位 置 ， 然 后 调用 translate() 方法 ， 将 矩形 位 移 
至 (200，200) ， 即 红色 短 形 的 位 置 。 我 们 来 用 一 张 图 看 看 ， 它 是 怎么 做 到 平移 变 
RAJ o 


aL 





没 错 ， 其 实 这 里 的 平移 变换 实质 就 是 在 平移 坐标 系 ， 而 对 translate() 传 入 的 参 
数 ， 实 质 就 是 新 坐标 系 相 对 于 旧 坐 标 系 的 原点 。 这 使 得 我 们 依 昌 是 在 (100，100) 
绘制 的 红色 矩形， 在 平移 坐标 系 之 后 ， 变 到 了 (200° 200) Abo 


注意 使 用 状态 保存 


其 实 这 里 有 一 个 坑 ， 我 们 如 果 想 把 矩形 平移 至 (300 > 300) 


X 


ww 


么 办 呢 ?或 许 我 们 会 


想 ， 直 接 调用 context.translate(200,200) 就 可 以 了 了。 好， 我 们 看 看 效果 。 


<!DOCTYPE html» 

«html lang="zh"> 

«head» 
«meta charset="UTF-8"> 
«title» T£ $4 -/title» 
«style» 


body ( background: url("./images/bg3.jpg") repeat; ) 


canvas ( border: 1px solid #aaaaaa; display: block; mar 


gin: 50px auto; } 
</style> 

</head> 

<body> 

<div id="Ccanvas-warp"> 
«canvas id="canvas"> 


你 的 浏览 器 居然 不 支持 Canvas ? | 赶快 换 一 个 吧 | | 


</canvas> 
</div> 


«script» 
window.onload = function(){ 


var canvas - document.getElementById("canvas"); 


canvas.width - 800; 
canvas.height - 600; 


var context - canvas.getContext("2d"); 


context.fillStyle = "#FFF"; 
context. fillRect(0,0, 800,600); 


context.fillStyle = "#00AAAA"; 
context. fillRect(100, 100, 200,100); 


context.fillStyle = "red"; 
context.translate(100,100); 
context. fillRect (100,100, 200,100); 


context.fillStyle = "green"; 
context.translate( 200,200); 
context. fillRect(100, 100, 200,100); 


3 
</script> 
</body> 
«/html» 


localhost.63342/Canvas/13/13-2.htmi 





这 里 的 绿色 矩形 并 没有 如 我 们 所 愿 在 (300，300) 位 置 处 ， 而 是 跑 到 了 (400° 
400) 这 里 。 为 什么 呢 ? 想必 大 家 已 经 知道 了 答案 一 一 Canvas 是 基于 状态 的 绘制 。 
在 我 们 第 一 次 平移 之 后 ， 坐 标 系 已 经 在 (100，100) 处 了 ， 所 以 如 果 继 续 平移 ， 这 
个 再 基于 新 坐标 系 继续 平移 坐标 系 。 那 么 要 怎么 去 解决 呢 ? 很 简单 ， 有 两 个 方法 。 


第 一 ， 在 每 次 使 用 完 变 换 之 后 ， 记 得 将 坐标 系 平移 回 原点 ， 即 调用 translate(- 
X, -y) ? 


第 二 ， 在 每 次 平移 之 前 使 用 context.save() ， 在 每 次 绘制 之 后 ， 使 


用 context.restore() 。 


切记 ， 千 万 不 要 再 想 着 我 继续 紧 接 着 第 一 次 平移 之 后 再 平 

4% translate(100,100) 不 就 行 了 ， 这 样 你 自己 的 坐标 系 就 会 乱 套 ， 根 本 找 不 到 

自己 的 坐标 系 原点 在 哪 ， 在 多 次 变换 或 者 封装 函数 之 后 ， 会 坑 死 你 。 所 以 一 定 要 以 
最 初 状态 为 最 根本 的 参照 物 ， 这 是 原则 性 问题 。 这 里 我 建议 使 用 第 二 种 方法 ， 而 且 
在 涉及 所 有 图 形变 换 的 时 候 ， 都 要 这 么 处 理 ， 不 仅仅 是 平移 变换 。 


具体 使 用 如 下 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
«title» T$ ¥#</title> 
«style» 
body { background: url("./images/bg3.jpg") repeat; ) 
#canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function()( 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


context.fillStyle = "#00AAAA"; 
context. fillRect(100, 100, 200,100); 


context. 
context. 
context. 
context. 
context. 


context. 
context. 
context. 
context. 
context. 


</script> 
</body> 
«/html» 


save( ); 

fillStyle - "red"; 
translate(100,100); 
fillRect (100,100, 200,100); 
restore(); 


save(); 

fillStyle = "green"; 
translate(200, 200); 
FfillRect(100,100, 200,100); 
restore(); 


localhost:63342/Canvas/13/13-3.htmi 





因此 ， 在 使 用 图 形变 换 的 时 候 ， 要 记得 结合 使 用 状态 保存 。 


好 了 ， 这 一 节 的 内 容 很 少 ， 我们 继续 前 进 。@ 


Ch14 旋转 变换 


旋转 变换 rotate() 


S eN > EE H E TEAR ee 
意 的 是 ， "de eq 系 的 原点 (0，0) 为 圆心 进行 的 顺 时 针 旋 转 。 所 以 ， 
在 使 用 rotate() 之 前 ， 通 常 需要 配合 使 用 translate() 平移 坐标 系 ， 确 定 旋 转 
的 圆心 。 即 ， 旋 转变 换 通常 搭配 平移 变换 使 用 的 。 


最 后 一 点 需要 注意 的 是 ，Canvas 是 基于 状态 的 绘制 ， 所 以 每 次 旋转 都 是 接着 上 次 旋 
转 的 基础 上 继续 旋转 ， 所 以 在 使 用 图 形变 换 的 nea 


配 save() 与 restore() 方法 ， 一 方面 重 置 旋转 角度 ， 另 一 方面 重 置 坐标 系 原 
点 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 旋 转变 换 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
«div id="canvas-warp"> 
«canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 


Var context 
context.fillStyle = "#FFF"; 
context .fillRect(0,0,800,600); 


for(var i = 


3 
s/SorIpb- 
«/body» 
«/html» 


context. 
context. 
context. 
context. 
context. 


context. 
context. 
context. 
context. 
context. 
context. 


= canvas.getContext("2d"); 


0; i <= 12; i++){ 

save(); 

translate(70 + i * 50, 50 t 1 * 40); 
fillStyle = "400AAAA"; 
fillRect(0,0,20,20); 

restore(); 


save( ); 

translate(70 + i * 50, 50 + i * 40); 
rotate(i * 30 * Math.PI / 180); 
fillStyle - "red"; 
fillRect(0,0,20,20); 

restore(); 





这 里 用 for 循 环 绘制 了 14 对 正方 形 ， 其 中 蓝 色 是 旋转 前 的 正方 形 ， 红 色 是 旋转 后 的 正 
方形 。 每 次 旋转 都 以 正方 形 左 上 角 顶 点 为 原点 进行 旋转 。 每 次 绘制 都 
被 save() 与 restore() 包 庄 起 来 ， 每 次 旋转 前 都 移动 了 坐标 系 。 童 鞋 们 可 以 自 
己 动 动手 ， 实 践 一 下 ， 就 能 体会 到 旋转 变换 的 奥妙 了 。 


绘制 魔 性 Logo 





这 是 在 度 娘 上 看 到 了 一 个 logo， 巧 妙 运用 了 旋转 变换 ， 用 一 个 很 简单 矩形 ， 通 过 旋 
转变 换 ， 变 成 了 一 个 很 漂亮 的 logo。 这 logo 是 不 是 很 有 魔 性 ? 童鞋 们 动 动脑 ， 尝 试 
实现 一 下 它 。 下 面 ， 提 供 我 实现 它 的 代码 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>] R Logoc/title» 
«style» 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


for(var i=1; 1<=10; it+){ 
context.save(); 
context.translate(400, 300); 
context.rotate(36 * i * Math.PI / 180); 
context.fillStyle = "rgba(255,0,0,0.25)"; 
context.fillRect(0, -200, 200, 200); 
context.restore(); 


T 
</script> 
</body> 
«/html» 


localhost:63342/Canvas/14/14-2.htmi 





是 不 是 非常 的 酷 ?这 个 图 形 稍 微分 析 一 下 发 现 还 是 变 简单 的 ， 就 是 让 一 个 正 放 形 ， 

以 屏幕 中 点 ( 即 初 始 正 方形 左下 角 顶 点 ) 为 圆心 进行 旋转 。 

艺术 是 不 是 很 美妙 ?大 家 一 定 以 及 体会 到 了 Canvas 的 奇妙 ， 简 简单 单 的 几 行 代码 就 
能 实现 无 穷 无 尽 的 效果 。 只 要 脑 洞 够 大 ， 没 有 什么 是 不 可 以 实现 的 。 所 以 ， 扬 起 咱 
们 的 艺术 家 的 旗帜 ， 加 快 步伐 ， 继 续 前 进 | 图 


Ch15 缩放 变换 


缩放 变换 scale() 


缩放 变换 scale(sx,sy) 传 入 两 个 参数 ， 分 别 是 水 平方 向 和 垂直 方向 上 对 象 的 缩 
放 人 倍数。 例如 context.scale(2,2) 就 是 对 图 像 放 大 两 倍 。 其 实 ， 看 上 去 简单 ， 
实际 用 起 来 还 是 有 一 些 问题 的 。 我 们 来 看 一 段 代 码 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 缩 放 变 换 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function(){ 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


context.strokeStyle = "red"; 

context.lineWidth = 5; 

for( var 1 = 1; 1 «4, Xtt)f 
context.save(); 
context.scale(i,i); 
context.strokeRect(50,50,150,100); 
context.restore(); 


T 
</script> 
</body> 
«/html» 





缩放 变换 应 注意 的 问题 


看 了 上 面 的 例子 ， 大 家 一 定 对 产生 的 结果 有 点 奇怪 。 一 是 左上 角 顶 点 的 坐标 变 了 ， 
而 是 线条 的 粗细 也 变 了 。 因 此 ， 对 于 缩放 变换 有 两 点 问题 需要 注意 : 


.缩放 时 ， 图 像 左 上 和 角 坐 标的 位 置 也 会 对 应 缩放 。 
. HÀ SAT» 图 像 线 条 的 粗细 也 会 对 应 缩放 o 

比如 对 于 最 小 的 那个 原始 矩形 ， 它 左上 角 的 坐标 是 (50°50) > e 
但 是 放大 2 倍 后 ， 左 上 角 坐 标 变 成 了 (1005 100) ， 线 条 宽度 变 成 了 o 这 就 是 
缩放 变换 的 副作用 。 


童鞋 们 一 定 在 期 待 着 我 说 解决 副作用 的 途径 。 很 遗憾 ， 没 有 什么 好 的 方法 去 解决 这 
些 副作用 。 如 果 想 国定 左上 角 坐 标 缩放 ， 可 以 把 左上 角 坐 标 变 成 (0 ，0) ， 这 样 的 
话 无 论 是 什么 倍数 ，0 乘 上 它 还 是 0， 所 以 不 变 。 如 果 不 想 让 线条 粗细 变化 ， 那 就 别 
使 用 线条 。 或 者 自己 封装 一 个 函数 ， 不 要 使 用 scale() 。 


究 其 根本 ， 之 前 我 们 说 过 平移 变换 、 旋 转变 换 、 缩 放 变 换 都 属于 坐标 变换 ， 或 者 说 
是 画布 变换 。 因 此 ， 缩 放 并 非 缩 放 的 是 图 像 ， 而 是 整个 坐标 系 、 整 个 画布 ! 就 像 是 
对 坐标 系 的 单位 距离 缩放 了 一 样 ， 所 以 坐标 和 线条 都 会 进行 缩放 。 人 和 仔细 想 想 ， 这 一 


Yos AD d Hp AY o 


好 啦 ， 这 一 节 的 内 容 就 这 么 少 ， 让 我 们 检查 一 下 弹药 是 否 充足 ， 准 备 征战 图 形变 换 
的 最 终 Boss。 继 续 前 进 | O 


Ch16 4E E X 4 


Zr d. AB f 


之 前 三 节 所 说 的 坐标 变换 的 三 种 方式 平移 translate() ， 缩 放 scale() ， 
以 及 旋转 rotate() 都 可 以 通过 transform() 做 到 。 





在 介绍 矩阵 变换 transform() 前 ， 我 们 来 说 一 说 什么 是 变换 矩阵 。 


LL C C 
b d f 
0 0 1 


以 上 是 Canvas 中 transform() 方法 所 对 应 的 变换 矩阵 。 而 此 方法 正 是 传 入 图 中 所 
示 的 六 个 参数 ， 具 体 为 context.transform(a,b,c,d,e,f) ° 


各 参数 意义 对 应 如 下 表 : 
a 水 平 缩 放 (1) 
b 水 平 倾 儿 (0) 
c 重 直 倾斜 (0) 
d 4& B IR XC) 
e 水 平 位 移 (0) 
) 


f 得 直 位 移 (0 


当 我 们 把 对 应 的 0 或 1 代入 进 和 矩阵 ， 可 以 发 现 这 是 一 个 单位 矩阵 (水 平和 重 直 缩放 默 
认 值 是 1 , 代表 缩放 1 倍 ? 即 不 缩放 ) o 该 方法 使 用 一 个 新 的 变化 矩阵 与 当 Fy HR FE 
阵 进行 乘法 运算 ， 然 后 得 到 各 种 变化 的 效果 。 


这 里 简单 说 一 下 ， 当 我 们 想 对 一 个 图 形 进 行 变换 的 时 候 ， 只 要 对 变换 矩阵 相应 的 参 
数 进行 操作 ， 操 作 之 后 ， 对 图 形 的 各 个 定点 的 坐标 分 别 乘 以 这 个 矩阵 ， 就 能 得 到 新 
的 定点 的 坐标 。 

而 Canvas 绘 图 中 ， 就 给 咱们 提供 了 一 个 函数 来 改变 这 个 变换 矩阵 ， 那 就 


是 transform() 。 


矩阵 变换 transform() 


注 : 以 下 三 个 变换 的 转换 结论 转自 张 雯 的 博客 ， 童 鞋 们 可 以 改进 去 看 看 详情 。 


平移 变换 





如 上 图 所 示 : x’ =x+dx，y'=y+dy。 


也 即 是 说 可 以 使 用 context.transform (1,0,0,1,dx,dy) 代 
替 context.translate(dx,dy) ° 也 可 以 使 用 
context.transform(0,1,1,0,dx,dy) 代替 。 


缩放 变换 


同 理 可 以 使 用 context.transform(sx,0,0,sy,0,0) 代替 context.scale(sx, 
Sy) ; 


也 可 以 使 用 context.transform(0, sy, sx,0,0,0) ; 


旋转 变换 





如 上 图 图 所 示 : 
B 点 是 通过 A 点 逆 时 针 旋 转 0 得 到 ， x =r * cosa? y=r * sina 
Bp x'zr*cos(a*0)-x*cos0-y*sinO > y’=r*sin(at+0)=x*sinO+y*cosé 


x. cos? -—snO Ox 
y'|2|sn8 cos8 OJ|y|e 
1 0 0 141 
也 即 是 
综 上 : context.transform(Math.cos(0*Math.PI/180)* 
Math.sin(O*Math.PI/180), - 
Math.sin(0*Math.PI/180),Math.cos(0*Math.PI/180): 0:0) TX 
代 context.rotate(0) » 


也 可 以 使 用 context.transform(- 
Math.sin(0*Math.PI/180),Math.cos(0*Math.PI/180) ， 
Math.cos(0*Math.PI/180)* Math.sin(0*Math.PI/180)»0» 0) 替代 。 
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议 使 用 transform() 的 时 候 ， 可 以 在 如 下 几 个 情况 下 使 用 : 


1. 使 用 context.transform (1,0,0,1,dx,dy) 代 

替 context.translate(dx,dy) 
2. 使 用 context.transform(sx,0,0,sy,0,0) 代替 context.scale(sx, sy) 
3. 使 用 context.transform(0,b,c,0,0,0) 来 实现 倾斜 效果 (最 实用 ) 9 


不 用 再 使 用 它 去 实现 旋转 了 ， 另 外 也 没有 也 不 用 全 记 这 些 结论 ， 直 接 记 下 abcdef 六 
个 参数 的 意义 ， 效 果 是 一 样 的 。 


下 面 我 们 看 一 个 代码 ， 熟 悉 一 下 : 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>#% T4&-/title» 
«style» 
body ( background: url("./images/bg3.jpg") repeat; ) 
canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
«div id="canvas-warp"> 
«canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 


J 


canvas.width = 800; 

canvas.height - 600; 

var context - canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800, 600); 


context.fillStyle = "yellow"; 
context.strokeStyle = "400AAAA"; 
context.linewidth = 5; 


context.save(); 

// 平 移 至 (300, 200) 
context.transform(1,0,0,1,300,200); 
// 水 平方 向 放大 2 倍 ， 重 直方 向 放大 1,5 倍 
context.transform(2,0,0,1.5,0,0); 





// 水 平方 向 向 右倾 斜 宽 度 10% 的 距离 ， 重 直方 向 向 上 倾斜 高 度 10% 的 距离 


context.transform(1, -0.1,0.1,1,0,0); 
context. fillRect(0,0, 200,200); 
context.strokeRect(0,0, 200,200); 
context.restore(); 


</script> 


</body> 
«/html» 


localhost.63342/Canvas/16/16-1.htm 





setTransform() 方法 


transform() 方法 的 行为 相对 于 由 rotate() , scale() , translate() ,or 

transform() 完成 的 其 他 变换 。 例 如 : 如 果 我 们 已 经 将 绘图 设置 为 放 到 两 倍 ， 则 

transform() 方法 会 把 绘图 放大 两 位， 那么 我 们 的 绘图 最 终 将 放大 四 倍 。 这 一 点 
和 之 前 的 变换 是 一 样 的 。 


但 是 setTransform() 不 会 相对 于 其 他 变换 来 发 生 行为 。 它 的 参数 也 是 六 


个 ， context.setTransform(a,b,c,d,e,f) ， 与 transform() 一 样 。 


这 里 我 们 通过 一 个 例子 来 说 明 : 绘制 一 个 矩形 ， 通 过 setTransform() 重 置 并 创 
建新 的 变换 矩阵 ， 再 次 绘制 矩形 ， 重 置 并 创建 新 的 变换 矩阵 ， 然 后 再 次 绘制 矩形 。 


<!DOCTYPE html» 
«html lang-"zh"» 
«head» 
«meta charset="UTF-8"> 
<title>#% $R</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 


«/head» 
«body» 


«div id="canvas-warp"> 


«canvas id="canvas"> 


你 的 浏览 器 居然 不 支持 Canvas ? | 赶快 换 一 个 吧 | | 


</canvas> 


</div> 


<script> 


window.onload = function()( 


Hh 


var canvas - document.getElementById("canvas"); 
canvas.width - 800; 

canvas.height - 600; 

var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800,600); 


context.fillStyle="yellow"; 
context. fillRect (200,100, 250,100) 


context.setTransform(1,0.5,-0.5,1,30,10); 
context.fillStyle-"red"; 
context.fillRect(200,100,250,100); 


context.setTransform(1,0.5,-0.5,1,30,10); 
context.fillStyle="blue"; 
context. fillRect(200,100, 250,100); 


</script> 


</body> 
«/html» 





解释 一 下 过 程 : 每 当 我 们 调用 setTransform() 时 ， 它 都 会 重 置 前 一 个 变换 和 矩阵 
然后 构建 新 的 矩阵 ， 因 此 在 下 面 的 例子 中 ， 不 会 显示 红色 和 珑 形 ， 因 为 它 在 蓝 色 珑 形 
下 面 。 


这 一 节 的 内 容 有 些 难 和 多 ， 但 是 除了 倾斜 其 他 并 不 实用 ， 所 以 童鞋 们 尽量 了 解 一 下 
就 好 ， 能 够 掌握 就 更 好 啦 | 至 此 ， 所 有 的 图 形变 换 我 们 已 经 上 完了 ， 基 本 的 三 大 变 
化 一 平移 变换 、 旋 转变 换 、 缩 放 变 换 ， 以 及 万 能 的 矩阵 变换 。 大 家 都 以 及 完全 党 
握 了 吗 ? 如 果 不 熟 练 ， 要 回头 多 看 看 ， 并 且 多 加 练习 。 稍 作 休 息 ， 下 一 节 开 始 ， 就 
是 新 的 航程 | 我 们 继续 前 进 | © 
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文本 API 简介 


今天 我 们 开始 征战 一 个 全 新 的 内 容 一 HTML5 Canvas 的 文本 API 1 要 知道 ， 艺 术 
家 通常 同时 也 是 一 个 书法 家 ， 所 以 我 们 要 学 习 写 字 ， 而 且 是 写 出 漂亮 的 字 。 是 不 是 
很 有 意思 ? 


好 了 ， 先 预告 一 下 Canvas 文本 API 有 哪些 。 


属性 描述 
font 设置 或 返回 文本 内 容 的 当前 字体 属性 
textAlign 设置 或 返回 文本 内 容 的 当前 对 齐 方式 
textBaseline 设置 或 返回 在 绘制 文本 时 使 用 的 当前 文本 基线 
方法 描述 

fillText() 在 画布 上 绘制 “被 填充 的 "文本 
strokeText() 在 画布 上 绘制 文本 (无 卉 充 ) 
measureText() 返回 包含 指定 文本 宽度 的 对 象 


看 了 上 面 的 表格 ， 相 信和 童鞋 们 以 及 有 了 大 概 的 认识 。 这 一 节 课 ， 我 们 先 说 文本 的 显 
mie eR? MAT font > fillText() 与 strokeText() 。 剩 下 三 个 属性 与 方 
法 ， 我 们 留 在 后 面 说 一 说 。 


在 Canvas 上 使 用 文本 ， 必 须 得 先知 道 : Canvas 上 的 文本 不 能 使 用 CSS 样 式 ， 虽 
AA font 属性 与 CSS 的 属性 相似 ， 但 是 却 不 能 够 交换 使 用 。 
显示 文本 三 步 走 战略 : 


1. 使 用 font 设置 字体 。 
2. 使 用 fillstyle 设置 字体 颜色 。 
3. 使 用 fillText() 方法 显示 字体 。 


这 里 的 font 属性 可 以 不 指定 ， 如 果 没 有 指定 字体 ， 则 默认 自动 使 用 10px 无 衬 线 
体 。 


下 面 的 代码 简单 显示 了 一 段 文本 ， 具 体 属 性 我 们 放 到 后 面 来 说 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 基 本 文本 显示 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context. fillRect(0,0,800, 600); 


//1. 使 用 font 设置 字体 。 

context.font = "50px serif"; 

//2. 使 用 `fil1Style w E FAA E o 

context.fillStyle = "#00AAAA"; 

//3. 使 用 `fil1Text() 方法 显示 字体 。 

context.fillText(" (CANVAS--Draw on the Web) ",50,300); 








u 
</script> 
</body> 
</html> 


localhost.63342/Canvas/17/17-1.htm 


«CANV AS--Draw on the Web» 





设置 文本 字体 font 


在 Canvas 中 设置 字体 样式 非常 的 容易 ， font 属性 与 CSS 的 设置 字体 格式 是 一 样 
的 ， 因 此 只 需 通过 把 与 CSS 兼 容 的 字符 串 应 用 到 font 属性 即 可 。 可 以 设置 字体 的 
样式 、 字 体 的 变 体 、 字 体 的 粗细 、 字 号 和 行 高 、 字 体外 观 等 。 


基本 格式 如 下 。 


context.font = 
"[font-style] [font-variant] [font-weight] 
[font-size/line-height] [font-family]" 

以 上 五 个 参数 均 可 缺 省 ， 各 个 参数 间 用 去 号 隔 开 。 
提示 : 参数 用 中 括号 [|] 包 误 起 来 表示 可 以 缺 省 。 


下 面 一 一 来 介绍 一 下 这 些 参 数值 的 意义 。 


font-style 


font-style 属性 定义 字体 的 风格 。 


值 描述 
normal 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 。 
italic 浏览 器 会 显示 一 个 斜体 的 字体 样式 。 
oblique 浏览 器 会 显示 一 个 倾斜 的 字体 样式 。 


后 两 者 通常 情况 下 看 上 去 是 没 哈 区 别 的 。 但 是 获取 倾斜 效果 的 方法 并 不 同 。italic 是 
使 用 字体 库 中 的 斜体 字 ， 通 常 一 个 字体 库 是 拥有 该 字体 的 斜体 形式 和 粗 体形 式 。 
oblique 是 直接 将 字 倾 儿 ， 如 果 一 个 字体 库 没 有 斜体 字 那 么 就 不 能 使 用 italic， 想 要 获 
FAR BFK AR AER M oblique 。 


font-variant 


font-variant 属性 设置 小 型 大 写字 母 的 字体 显示 文本 ， 这 意味 着 所 有 的 小 写字 母 均 会 
被 转换 为 大 写 ， 但 是 所 有 使 用 小 型 大 写字 体 的 字母 与 其 余 文 本 相 比 ， 其 字体 尺寸 更 
小 o 


值 描述 
normal 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 。 
small-caps 浏览 器 会 显示 小 型 大 写字 母 的 字体 。 


看 下 面 的 一 张 图 片 就 知道 这 属性 啥 意思 啦 。 


查看 结果 : 
CANVAS--Draw on the Web 
CANVAS--DRAW ON THE WEB 


就 是 这 样 ， 上 面 一 行 是 使 用 的 默认 值 normal， 下 面 一 行使 用 的 是 small-caps。 效 果 
就 是 ， 原 本 大 写 的 英文 字母 不 变 ， 小 写 的 英文 字母 变 成 大 写 ， 但 是 大 小 不 变 。 


font-weight 


font-weight 属性 设置 文本 的 粗细 。 


值 描述 

normal 默认 值 。 浏 览 器 显示 一 个 标准 的 字体 样式 。 
bold 定义 粗 体 字符 。 

bolder 定义 更 粗 的 字符 。 

lighter 定义 更 细 的 字符 。 

100-900 之 间 的 定义 由 粗 到 细 的 字符 。400 等 同 于 normal， 而 700 等 同 于 
值 bold ° 
font-size 


font-size 属性 可 设置 字体 的 尺寸 。 


值 描述 
xx-small 最 小 字体 。 
x-small 较 小 字体 。 

small 小 字体 。 
medium AB dB o 
large 大 字体 。 
x-large 较 大 字体 。 
xx-large 最 大 字体 。 
任意 数值 单位 pX， 代 表 字 号 值 。 
line-height 


line-height 属性 设置 行 间 的 距离 〈 行 高 ) 。 不 允许 使 用 负 值 


font-family 


font-family 规定 元 素 的 字体 系列 。 


使 用 Qfont-face Á € LFA 


HTML5 支 持 常用 字体 ， 如 果 没 有 可 以 使 用 @font-face 扩展 字体 。 但 是 并 不 建议 
使 用 。 


@font-face 能 够 加 载 服务 器 端的 字体 文件 ， 让 客户 端 显示 客户 端 所 没有 安装 的 字 
体 。 目 前 支持 加 载 EOT 与 TTF 文 件 。 


示例 : 代码 过 长 ， 略 。 
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这 里 的 字体 是 我 从 国内 的 一 个 网 站 字体 下 载 大 宝库 中 下 载 的 ， 变 不 错 的 ， 如 果 
大 家 需要 哈 字 体 都 可 以 去 看 看 。 我 这 里 下 载 的 字体 库 只 有 A-Z 这 26 个 大 写 英文 字 
母 ， 所 以 遇 到 小 写 的 自动 转 大 写 ， 遇 到 汉字 或 者 数字 它 指定 用 星星 符号 代替 。 使 用 
了 CSS3 中 的 @font-face 即 可 自 定 义 字 体 ， 是 不 是 非常 的 酷 。 





同 绘制 矩形 一 样 ， 这 里 “绘制 "文本 也 给 出 了 两 种 方法 

—— fillText() 与 strokeText() 。 之 所 以 说 一 样 ， 因 为 这 两 个 方法 也 可 以 通 
过 fillstyle 与 strokeStyle 设置 对 应 的 属性 ， 之 前 说 过 的 颜色 填充 、 渐 变 圳 
充 、 甚 至 是 图 案 填 充 都 是 可 以 的 。 


fillText() 与 strokeText() 的 参数 表 是 一 样 的 ， 接 受 4 个 参数 ， 分 别 是 
String，x，y 与 mnaxlen， 其 中 String 是 指 要 显示 的 字符 串 ， 之 后 Xx 与 y 是 指 显示 的 坐 
标 ， 最 后 一 个 maxlen 是 可 以 缺 省 的 数值 型 参数 ， 代 表 显 示 的 最 大 宽度 ， 单 位 是 像 
素 。 如 果 文 本 的 长 度 超过 了 这 个 maxlen，Canvas 就 会 将 显示 文本 横向 压缩 。 通 常 
为 了 保证 字体 的 美观 ， 我 们 不 设置 maxlen。 


BP context.fillText(String,x,y, 


[maxlen]) 4 context.strokeText(String,x,y, [maxlen]) ° 


下 面 我 们 通过 一 个 案例 来 看 看 文本 泻 沫 的 效果 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>x Aix #</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<Sscript= 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
Canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


context.beginPath(); 
context.font - "50px Verdana"; 
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var gradient = context.createLinearGradient(0,0,800,0); 
gradient.addColorStop("0", "magenta"); 
gradient.addColorStop("0.5","blue"); 
gradient.addColorStop("1.0","red"); 

context.fillStyle = gradient; 

context.strokeStyle = "#00AAAA"; 
context.strokeText("airingursb.github.io", 50, 100); 
context .fillText("airingursb.github.io", 50, 200); 


context. fillText("airingursb.github.io", 50, 300, 200); 


context.beginPath(); 


var img 
img.src = "./images/bg1.jpg"; 
img.onload = function(){ 


new Image(); 


var pattern = context.createPattern(img, "repeat"); 
context.fillStyle = pattern; 
context. fillText("airingursb.github.io", 50, 400); 


context.beginPath(); 
context.fillStyle = "#00AAAA"; 
context.fillText("Airing i% > x% m", 50, 500); 


Hn 


«/body» 
«/html» 


airingursb.github.io 


airingursb.github.io 
airingursb.github.io 


Airing 的 博客 ， 欢 迎 访问 





这 里 第 一 行使 用 的 是 一 般 颜 色 的 strokeText() 方法 ， 第 二 行使 用 的 是 渐变 色 


的 fillText() 方法 ， 第 三 行 设 置 了 maxlen， 第 四 行 给 字体 填充 的 是 纹理 图 案 ， 
第 五 行 是 广告 ...... 欢 迎 访问 个 人 博客 ! 


好 了 ， 还 有 font 那 几 个 参数 的 不 同 值 大 家 可 以 自己 试 一 下 ， 看 看 粗 体 是 什么 效 
果 、 和 斜体 什么 样子 ， 自 己 试 一 试 就 会 有 不 同 的 感觉 。 这 节 的 内 容 有 点 多 ， 大 家 吸收 
一 下 ， 书 法 之 魂 已 在 心中 。 让 我 们 继续 前 进 | © 


Ch18 文本 对 齐 与 度量 
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水 平 对 齐 textAlign 
context.textAlign="center|end|left|right|start"; 


其 中 各 值 及 意义 如 下 表 o 


值 描述 

start 默认 。 文 本 在 指定 的 位 置 开始 。 
end 文本 在 指定 的 位 置 结 

center 文本 的 中 心 被 放置 在 指定 的 位 置 。 
left 文本 左 对 齐 。 

right 文本 右 对 齐 。 


我 们 通过 一 个 例子 来 直观 的 感受 一 下 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>textAlign</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: ipx solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0, 800,600); 


// 在 位 置 400 创建 蓝 线 
context.strokeStyle="blue"; 
context .moveTo(400, 100); 
context.lineTo(400,500); 
context.stroke(); 


context.fillStyle = "#000"; 
context.font="50px Arial"; 


// 显示 不 同 的 textAlign 10 
context.textAlign="start"; 
context.fillText("textAlign=start", 400, 120); 
context.textAlign="end"; 
context.fillText("textAlign=end", 400, 200); 
context.textAlign="left"; 
context.fillText("textAlign=left", 400, 280); 
context.textAlign="center"; 
context.fillText("textAlign=center", 400, 360); 
context.textAlign="right"; 
context.fillText("textAlign=right", 400, 480); 
}; 

</Script= 

</body> 

</html> 


textAlign=start 
textAlign=end 
textAlign-left 
textAlign=center 


textAlign=right 





重 直 对 齐 textBaseline 


context.textBaseline-"alphabetic|top|hanging|middle|ideographic|bot 
tom"; 


其 中 各 值 及 意义 如 下 表 o 


值 描述 
alphabetic 默认 。 文 本 基线 是 普通 的 字母 基线 。 
top 文本 基线 是 em 方 框 的 顶端 。 
hanging 文本 基线 是 悬挂 基线 。 
middle 文本 基线 是 em 方 框 的 正中 。 
ideographic 文本 基线 是 表意 基线 。 


bottom 文本 基线 是 em 方 框 的 底 端 。 


首先 咱们 通过 一 个 图 来 看 一 下 各 个 基线 代表 的 位 置 。 












top 

ia y hanging 
A ( OT middle 
y JE alphabetic 
ideographic 

bottom 


我 们 通过 一 个 例子 来 直观 的 感受 一 下 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
<meta charset="UTF-8"> 
<title>textBaseline</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; ) 
#canvas { border: ipx solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="Canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
</canvas> 
</div> 


<script> 
window.onload = function(){ 
var canvas = document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 


Hh 


context. 


// 在 位 置 
context 


context. 
context. 
context. 


context. 
context. 


//4& y=300 以 不 同 的 textBaseline 值 放置 每 个 单词 
context. 
context. 
context. 
context. 
context. 
context. 
context. 
context. 
context. 
context. 


</script> 


</body> 
</html> 


fillRect(0,0,800, 600); 


y=300 绘制 蓝 色 线 条 


.strokeStyle="blue"; 


moveTo(0, 300); 
lineTo(800,300); 
stroke(); 


fillstyle = "400AAAA"; 
font-z"20px Arial"; 


textBaseline="top"; 
fillText("Top",150,300); 
textBaseline="bottom"; 
fillText("Bottom", 250,300); 
textBaseline="middle"; 
fillText("Middle", 350, 300); 
textBaseline="alphabetic"; 
fillText("Alphabetic", 450, 300); 
textBaseline="hanging"; 
fillText( "Hanging", 550, 300); 





文本 度量 


文本 度量 使 用 measureText() 方法 实现 ， 这 个 api 在 换行 显示 判断 中 会 有 奇效 。 例 
如 之 前 提 到 的 微 信 界面 生成 器 ， 在 对 话 的 字符 长 度 超出 一 定 值 的 时 候 ， 需 要 换行 显 
那么 ， 这 个 功能 需要 怎么 实现 呢 ? 就 是 通 


me 
过 context.measureText(text).width; 来 实现 判断 。 其 中 ，text 是 要 测量 的 文 
本 


里 提供 一 个 代码 演示 一 下 该 方法 的 作用 ， 大 家 可 以 课 下 自生 I , 
eaa 是 比较 实用 的 ， 因 为 Canvas 文本 API 只 支持 单行 显 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>measureText</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: ipx solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 


<body> 
«div id="canvas-warp"> 
«canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
</canvas> 
</div> 


<script> 
window.onload = function()( 

var canvas - document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800, 600); 


// 居 中 显示 
context.textAlign = "center"; 
context.textBaseline - "middle"; 


context.fillStyle = "#00AAAA"; 

context.font="30px Arial"; 

var txt="Hello Canvas"; 

context.fillText("width:" + context.measureText(txt).wid 
th, 400, 300); 

context. fillText(txt, 400, 250); 


e 
</SChipt= 
</body> 
</html> 


Hello Canvas 


width:178.41796875 





£ y » Canvas 文本 API 的 内 容 已 经 说 完了 ， 是 不 是 非常 的 简单 。 现 在 咱们 已 经 有 了 
书法 家 和 艺术 家 的 底蕴 了 ， 接 下 来 ， 咱 们 学 一 些 Canvas 高 级 内 容 API~ 是 不 是 特别 
的 激动 ~ 我 们 继续 前 进 | O 


Ch19 全 局 阴影 与 图 像 合成 


阴影 效 采 
创建 阴影 效果 需要 操作 以 下 4 个 属性 : 


e context.shadowColor : "Xj 6. - 

e context.shadowOffsetXx : 阴影 X 轴 位 移 。 正 值 向 右 ， 负 值 向 左 。 
e context.shadowOffsetY : 阴影 y 轴 位 移 。 正 值 向 下 ， 负 值 向 上 。 

e context.shadowBlur : 阴影 模糊 滤 镜 。 数 据 越 大 ， 扩 散 程度 越 大 。 


这 四 个 属性 只 要 设置 了 第 一 个 和 剩 下 三 个 中 的 任意 一 个 就 有 阴影 效果 。 不 过 通常 情 
LTF’ 四 个 属性 都 要 设置 。 


例如 ， 创 建 一 个 向 右 下 方位 移 各 5px 的 红色 阴影 ， 模 糊 2px， 可 以 这 样 写 。 


context.shadowColor = "red"; 
context.shadowOffsetX = 5; 
context.shadowOffsetY = 5; 
context.shadowBlur= 2; 


需要 注意 的 是 ， 这 里 的 阴影 同 其 他 属性 设置 一 样 ， 都 是 基于 状态 的 设置 。 因 此 ， 如 
果 只 想 为 某 一 个 对 象 应 用 阴影 而 不 是 全 局 阴影 ， 需 要 在 下 次 绘制 前 重 置 阴影 的 这 
个 属性 。 


下 面 的 例子 摘抄 自 《HTML5 Canvas 开 发 详解 》 第 二 版 ， 案 例 名 为 textArranger， 
是 一 个 交互 的 网 页 。 结 合 了 上 两 节 所 说 的 文本 API 和 本 节 的 阴影 属性 。 大 家 可 以 自 
己 打 开 链 接 尝试 一 下 ， 看 看 每 个 属性 的 效果 是 什么 。 本 例 代 码 过 长 ， 在 此 不 贴 。 
演示 19-1 


\ 


行 结果 : 


Ñ 





Text: your tex 

Text Font: se B 
Font Weight: noma B 
Font Style: noma 目 
Text Size: == 








Fill Type : Color Fn 

Text Color: 

Text Color 2: 

Fill Or Stroke: m B 


Text Baseline mss B 
Text Align cme B 





Shodow Blur; 口 一 一 一 
Shadow Color: 
Canvas Width: «mm m 
Canvas Height: «e mm 
Canvas Stua Width e => 





全 局 透明 globalAlpha 


这 个 也 是 很 简单 的 一 个 属性 ， 黑 认 值 为 1.0， 代 表 完 全 不 透明 ， 取 值 范围 是 0.0 ( 完 
全 透明 ) ~1.0。 这 个 属性 与 阴影 设置 是 一 样 的 ， 如 果 不 想 针对 全 局 设置 不 透明 度 ， 
就 得 在 下 次 绘制 前 重 置 globalAlpha 。 


总 结 一 下 : 基于 状态 的 属性 有 哪些 ? 

— globalAlpha 

— globalCompositeOpeartion 

— strokeStyle 

— textAlign , textBaseline 

—— — lineCap , lineJoin , lineWidth , miterLimit 

— fillStyle 

— kf ont 

——— shadowBlur , shadowColor , shadowOffsetX , shadowOffsetY 


我 们 通过 一 个 代码 ， 来 体验 一 下 globalAlpha 的 神奇 之 处 ~ 
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<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
«title» 42/5i$9]«/title» 
«style» 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
«div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800, 600); 


context.globalAlpha = 0.5; 


for(var i=0; i<=50; i++){ 
var R = Math.floor(Math.random() * 255); 
var G = Math.floor(Math.random() * 255); 
var B = Math.floor(Math.random() * 255); 


context.fillStyle = "rgb("+R+","+G+","4B + 
5 Mss 


context.beginPath(); 
context.arc(Math.random() * canvas.width, Math.rando 
m() * canvas.height, Math.random() * 100, 0, Math.PI * 2); 


context.fill(); 


3 
</script> 
</body> 
«/html» 








是 不 是 非常 的 酷 ? 终于 有 点 艺术 家 的 范 儿 了 吧 。 


图 像 合成 globalCompositeOperation 


两 个 图 像 重 合 的 时 候 ， 就 涉及 到 了 对 这 两 个 图 像 的 合成 处 
理 。 globalCompositeOperation 属性 设置 或 返回 如 何 将 一 个 源 ( 新 的 ) 图 像 绘 
制 到 目标 (已 有 ) 的 图 像 上 。 


源 图 像 = 您 打算 放置 到 画布 上 的 绘图 。 


目标 图 像 = 您 已 经 放置 在 画布 上 的 绘图 。 


值 描述 


source- 默认 。 在 目标 图 像 上 显示 源 图 像 。 
over 
source- milal 0 ne 
atop 见 的 。 
: 在 目标 图 像 中 显示 源 图 像 。 只 有 目标 图 像 内 的 源 图 像 部 分 会 
source-in 示 ， 目 标 图 像 是 透明 的 。 
Se “会 显示 目标 图 像 之 外 源 图 像 部 
source-out ,目标 图 > Fem iF AA AY © 
destination- 在 源 图 像 上 方 显示 目标 图 像 。 
over 


destination- ” 在 源 图 像 顶部 显示 目标 图 像 。 源 图 像 之 外 的 目标 图 像 部 分 不 会 被 


atop 显示 。 
destination- ”在 源 图 像 中 显示 目标 图 像 。 源 图 像 内 的 目标 图 像 部 分 会 被 显 
in ae e 
destination- ” 在 源 图 像 外 显示 目标 图 像 。 只 有 源 图 像 外 的 目标 图 像 部 分 会 被 显 
out Ro REGE o 
lighter 显示 源 图 像 + 目标 图 像 。 
copy 显示 源 图 像 。 忽 略 目标 图 像 。 
xor 使 用 弄 或 操作 对 源 图 像 与 目标 图 像 进行 组 合 


下 面 我 用 一 段 代码 来 说 明 一 下 这 些 值 的 意义 。 


<!DOCTYPE html» 

«html lang="zh"> 

«head» 
«meta charset="UTF-8"> 
<title> 图 像 合成 </title> 
<style> 


#canvas ( border: 1px solid £aaaaaa; display: block; mar 


gin: 50px auto; T 
</style> 
</head> 
<body> 
<div id="Canvas-warp"> 
«canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 


«/canvas» 
«/div» 


<script> 
window.onload = function()( 
var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 


context.globalCompositeOperation - "source-out"; 
context.globalAlpha - 0.5; 


for(var iz0; i«-50; it+){ 
var R - Math.floor(Math.random() * 255); 
var G - Math.floor(Math.random() * 255); 
var B - Math.floor(Math.random() * 255); 


context.fillStyle = "rgb("+R+","+G+"," - B 
at ae 


context.beginPath(); 

context.arc(Math.random() * canvas.width, Math.rando 
m() * canvas.height, Math.random() * 100, 0, Math.PI * 2); 

context.fill(); 


}; 
</script> 
</body> 
«/html» 








我 这 个 代码 相对 比较 简单 ， 这 里 推荐 一 下 laijieyao 的 专栏 一 一 【HTML5】Canvas 之 
globalCompositeOperation 属 性 详解 ， 这 篇 博客 里 面 介绍 了 该 属性 的 11 值 的 不 同 效 
果 ， 大 家 可 以 看 一 下 有 一 个 直观 的 感受 。 


这 里 的 代码 和 上 面 的 一 样 ， 但 是 用 到 了 图 像 合 成 ， 所 以 把 背景 和 空白 矩形 去 掉 了 ， 
不 然 的 话 所 有 的 图 像 都 是 合成 图 像 ， 因 为 他 们 都 是 建立 在 那个 空白 矩形 之 上 的 。 虽 


然 只 加 了 context.globalCompositeOperation = "source-out"; —a4m > 
其 他 的 圆 都 不 见 了 ， 有 时 候 只 会 显示 1~2 个 圆 。 因 为 source-out 就 是 图 像 合成 处 理 


时 ， 保 留 没有 被 各 加 的 图 像 。 因 此 可 以 推出 ， 在 随机 生成 的 50 个 圆 中 ， 有 49 个 都 重 
&T ° 


还 有 其 他 的 属性 ， 童 鞋 们 私下 也 可 以 自己 尝试 一 下 ， 都 能 带 来 不 一 样 的 神奇 效果 。 


这 一 小 节 介 绍 了 阴影 、 透 明 与 图 像 合成 ， 大 家 消化 一 下 ， 建 议 其 他 属性 值 都 自己 党 
试 一 下 加 深 理 解 。 我 们 继续 向 着 终点 前 进 | ~ 图 


Ch20 裁剪 和 绘制 图 像 


AU XX clip() 


使 用 Canvas 绘 制图 像 的 时 候 ， 我 们 经 常会 想 要 只 保留 图 像 的 一 部 分 ， 这 是 我 们 可 以 
使 用 canvas API 再 带 的 图 像 裁剪 功能 来 实现 这 一 想法 。 


Canvas API 的 图 像 裁 剪 功 能 是 指 ， 在 画布 内 使 用 路 径 ， 只 绘制 该 路 径 内 所 包含 区 域 
的 图 像 ， 不 绘制 路 径 外 的 图 像 。 这 有 点 像 Flash 中 的 图 层 遮 章 。 


使 用 图 形 上 下 文 的 不 带 参数 的 clip() 方法 来 实现 Canvas 的 图 像 裁剪 功能 。 ui 
法 使 用 路 径 来 对 Canvas 画 布设 置 一 个 裁剪 区 域 。 因 此 ， 必 须 先 创 建 好 路 径 。 创 建 
整 后 ， 调 用 clip() 方法 来 设置 裁剪 区 域 。 


需要 注意 的 是 裁剪 是 对 画布 进行 的 ， 裁 切 后 的 画布 不 能 恢复 到 原来 的 大 小 ， 也 就 是 
说 画布 是 越 切 越 小 的 ， 要 想 保证 最 后 仍然 能 在 canvas 最 初 定义 的 大 小 下 绘图 需要 注 


Z save() 和 restore() 。 画 布 是 先 裁 切 完 了 再 进行 绘图 。 并 不 一 定 非 要 是 图 
片 ， 路 径 也 可 以 放 进 去 ~ 


先 来 看 看 一 个 简单 的 Demo。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 栽 前 区 域 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 
</canvas> 


«/div» 


«script» 
window.onload = function()( 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context. fillRect(0,0, 800,600); 


// 在 屏幕 上 绘制 一 个 大 方块 
context.fillStyle = "black"; 
context.fillRect(10,10,200,200); 
context.save(); 
context.beginPath(); 

// 裁 剪 画布 从 (9，9) 点 至 (59，59 ) 的 正方 形 
context.rect(0,0,50,50); 
context.clip(); 


/ / 1x 6R 

context.beginPath(); 

context.strokeStyle - "red"; 
context.lineWidth = 5; 
context.arc(100,100,100,0,Math.PI * 2,false); 
// 整 贺 

context.stroke(); 

context.closePath(); 


context.restore(); 


// 再 次 裁 切 整个 画布 
context.beginPath(); 
context.rect(0,0,500,500); 
context .clip(); 


// 绘 制 一 个 没有 裁 切 的 蓝 线 
context.beginPath(); 
context.strokeStyle - "blue"; 


context.lineWidth = 5; 
context.arc(100,100,50,0,Math.PI * 2,false); 
// 整 贺 
context.stroke(); 
context.closePath(); 
T 
</script> 
</body> 
«/html» 





自己 分 析 吧 ， 能 够 理解 这 段 程序 ， 就 完全 掌握 了 clip() 方法 的 使 用 了 。 


绘制 图 像 drawImage() 


drawImage() 是 一 个 很 关键 的 方法 ， 它 可 以 引入 图 像 、 画 布 、 视 频 ， 并 对 其 进行 
缩放 或 裁剪 。 


一 共有 三 种 表现 形式 : 


1. 三 参数 : context.drawImage(img,x,y) 


context.drawImage(img,x,y,width,height) 


context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height) 


三 参数 的 是 标准 形式 ， 可 用 于 加 载 图 像 、 画 布 或 视频 ; 


; 五 参数 的 除了 可 以 加 载 图 像 
还 可 以 对 图 像 进行 指定 宽 高 的 缩放 ; 九 参 数 的 除了 缩放 ， 还 可 以 裁剪 。 各 参数 意义 
见 下 表 。 
参数 描述 
img 规定 要 使 用 的 图 像 、 画 布 或 视频 © 
SX 可 选 。 开 始 剪 切 的 X 坐标 位 置 。 
sy 可 选 。 开 始 剪 切 的 y 坐标 位 置 。 
swidth 可 选 。 被 剪 切 图 像 的 宽度 
sheight 可 选 。 被 剪 切 图 像 的 高 度 。 
X 在 画布 上 放置 图 像 的 x 坐标 位 置 。 
y 在 画布 上 放置 图 像 的 y 坐标 位 置 。 
width 可 选 。 要 使 用 的 图 像 的 宽度 。 (伸展 或 缩小 图 像 ) 
height 可 


选 。 要 使 用 的 图 像 的 高 度 。 (伸展 或 缩小 图 像 ) 
下 面 ， 我 们 加 载 一 个 图 片 试 试 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>drawImage()</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; ) 
#canvas { border: ipx solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800,600); 


var img new Image(); 
img.src = "./images/20-1.jpg"; 
img.onload = function(){ 


context.drawImage(img, 200,50); 


u 
</SChipt— 
</body> 
</html> 


演示 20-2 





创建 相框 


这 里 ， 我 们 结合 clip() 和 drawImage() 以 及 之 前 学 的 三 次 贝 塞 尔 曲 
线 bezierCurveTo() ， 来 为 上 面 一 个 案例 ， 加 上 一 个 心 形 的 相框 ~ 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title> 绘 制 心 形 相框 </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 


«/div» 


«script» 


window.onload - function()( 


Hh 


var canvas - document.getElementById("canvas"); 
canvas.width = 800; 

canvas.height = 600; 

var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800, 600); 


context.beginPath(); 

context.moveTo(400,260); 
context.bezierCurveTo(450,220,450,300, 400, 315); 
context.bezierCurveTo(350, 300, 350, 220, 400, 260); 
context.clip(); 

context.closePath(); 


var img new Image(); 
img.src - "./images/20-1.jpg"; 
img.onload = function(){ 


context.drawImage(img, 348, 240,100,100); 


</SChipt> 


</body> 
</html> 





是 不 是 美美 的 ? 好 啦 ， 至 此 最 关键 的 遮 黑 和 图 像 裁 剪 已 经 说 完了 ， 其 实在 java.awt 
中 ， drawImage() 也 是 一 个 至 关 重 要 的 方法 。 有 人 说 制作 Java 游 戏 界面 ， 只 要 会 
用 drawImage() 就 可 以 一 招 打 遍 天 下 ~ 在 Canvas 里 也 是 一 样 的 。 美 工 提 供 的 素材 
基本 都 是 图 片 ， 这 个 时 候 drawImage() 对 图 片 的 处 理 就 很 重要 了 。 既 是 基本 功 ， 
也 是 对 图 片 最 重要 的 处 理 方法 。 


这 一 节 就 跟 大 家 吹 这 么 多 了 ~ 让 我 们 继续 前 进 | O 


非 零 环 绕 原 则 


Ch21 非 零 环绕 原则 


IRAE Ty ve) Ay FESR GEIR MO 


PRALE 83 EL7U AR ELLE 4B 83 ^ MARRARA A NBR > MR 
下 面 这 图 一 样 ， 童 鞋 们 知道 怎么 用 Fill() XER? 


这 里 就 要 用 到 数学 上 的 一 个 方法 一 一 非 零 环绕 原则 ， 来 判断 哪 块 区 域 是 里 面 ， 哪 块 
区 域 是 外 面 。 接 下 来 ， 我 们 具体 来 看 下 什么 是 非 零 环绕 原则 。 
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非 零 环绕 原则 


首先 ， 我 们 得 给 图 形 确定 一 条 路 径 ， 只 要 “一 笔画 "并 且 “ 不 走 重 复 路 线 " 就 可 以 了 。 如 
图 ， 标 出 的 是 其 中 的 一 种 路 径 方向 。 我 们 先 假定 路 径 的 正方 向 为 1 (其 实 为 -1 啥 的 
也 都 可 以 ， 正 负 方 向 互 为 相反 数 ， 不 是 0 就 行 ) ， 那 么 反方 向 就 是 其 相反 数 -1。 


然后 ， 我 们 在 子路 径 切割 的 几 块 区 域内 的 任意 一 点 各 取 一 条 方向 任意 的 射线 ， 这 里 
我 只 取 了 三 个 区 域 的 射线 为 例 ， 来 判断 这 三 块 区 域 是 “里 面 "还 是 “外 面 "。 


接 下 来 ， 我 们 就 来 判断 了 。S1 中 引出 的 射线 L1， 与 S1 的 子路 径 的 正方 向 相交 ， 那 
么 我 们 就 给 计数 器 +1， 结 果 为 +1， 在 外 面 。 


S2 中 引出 的 射线 L2 ;与 两 条 子路 径 的 正方 向 相交 ， 计 数 器 +2， 结 果 为 +2， 在 外 
面 o 


S3 中 引出 的 射线 L3， 与 两 条 子路 径 相 交 ， 但 是 其 中 有 一 条 的 反方 向 ， 计数 器 +1-1， 
结果 为 0， 在 里 面 。 没 错 ， 只 要 结果 不 为 0， 该 射线 所 在 的 区 域 就 在 外 面 。 
绘制 圆 环 


记得 我 们 之 前 学 过 的 arc 方法 吗 ? 它 的 最 后 一 个 参数 就 是 判断 是 路 径 方向 的 ， 如 
果 是 路 径 相反 的 两 个 同心 圆 在 一 起 ， 图 上 色 会 有 什么 神奇 的 效果 呢 ? 


> 








下 面 我 们 通过 代码 来 实现 它 。 


<!DOCTYPE html> 
<html lang="zh"> 
<head> 
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<meta charset="UTF-8"> 
<title> </title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; ) 
canvas ( border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; ) 
</style> 
</head> 
<body> 
«div id="canvas-warp"> 
«canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


«script» 
window.onload = function(){ 

var canvas - document.getElementById("canvas"); 
canvas.width - 800; 
canvas.height - 600; 
var context - canvas.getContext("2d"); 
context.fillStyle - "ZFFF"; 
context.fillRect(0,0,800,600); 


context.shadowColor = "4545454"; 
5; 
5; 


context.shadowOffsetX 


context.shadowOffsetY 
context.shadowBlur = 2; 


context.arc(400, 300, 200, 0, Math.PI * 2 ,false); 
context.arc(400, 300, 230, 0, Math.PI * 2 ,true); 
context.fillStyle = "#00AAAA"; 
context. fill(); 
3 
</script> 
</body> 
«/html» 


演示 21-1 





结合 我 们 上 一 节 学 到 了 阴影 效果 ， 这 个 圆 环 看 上 去 是 不 是 特别 的 有 立体 感 ? 


=| 


BR TE BY OR Re 
FEF HR > ALAS FER RAR HU Fe BRAM TEEN HRA © 


<!DOCTYPE html» 
«html lang-"zh"» 
«head» 
«meta charset="UTF-8"> 
<title># = WARR</title> 
<style> 
body { background: url("./images/bg3.jpg") repeat; } 
#canvas { border: 1px solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 ! | 


«/canvas» 


«/div» 


<script> 


window.onload = function(){ 


HH 


var canvas - document.getElementById("canvas"); 
canvas.width = 800; 

canvas.height = 600; 

var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 

context. fillRect(0,0, 800,600); 


context.beginPath(); 
context.rect(200, 100, 400, 400); 
drawPathRect(context, 250, 150, 300, 150); 
drawPathTriangle(context, 345, 350, 420, 450, 270, 
context.arc(500, 400, 50, 0, Math.PI * 2, true); 
context.closePath(); 


context.fillStyle = "#058"; 
context.shadowColor = "gray"; 
context.shadowOffsetX = 10; 
context.shadowOffsetY - 10; 
context.shadowBlur - 10; 
context .fill(); 


// 逆 时 针 绘 制 矩 形 
function drawPathRect(cxt, x, y, w, h)( 


J** 
* 这 里 不 能 使 用 beginPath 和 closePath ， 
* 不 然 就 不 属于 子路 径 而 是 另 一 个 全 新 的 路 径 ， 
* 无 法 使 用 非 零 环绕 原则 
we 

cxt.moveTo(x, y); 

cxt.lineTo(x, y + h); 

cxt.lineTo(x * w, y * h); 

cxt.lineTo(x * w, y); 

cxt.lineTo(x, y); 


A450); 


// 逆 时针 绘 制 三 角形 
function drawPathTriangle(cxt, x1, yi, x2, y2, x3, y3){ 
cxt.moveTo(x1, y1); 
cxt.lineTo(x3,y3); 
cxt.lineTo(x2,y2); 
cxt.lineTo(x1,y1); 


</script> 
</body> 
</html> 





这 里 手动 绘制 矩形 的 原因 是 我 们 想 要 得 到 逆 时 针 路 径 的 和 矩形， 而且 API 提 供 

的 rect() 方法 绘制 是 顺 时 针 和 矩形 。 另 外 ， 需 要 注意 的 是 ， 这 个 剪纸 是 一 个 图 形 ， 
一 个 路 径 。 不 能 在 绘制 猴 空 三 角形 和 绘制 猴 空 矩形 的 方法 里 使 

用 beginPath() 和 closePath() ， 不 然 它 们 就 会 是 新 的 路 径 、 新 的 图 形 ， 而 不 
是 剪纸 的 子路 径 、 子 图 形 ， 就 无 法 使 用 非 零 环绕 原则 。 


好 了 ， 这 一 节 的 内 容 就 到 这 里 ， 内 容 相 对 来 说 还 是 比较 简单 实用 的 。 下 一 节 就 是 
Canvas API 的 最 后 一 节 了 ， 大 家 已 经 掌握 了 这 么 多 的 绘制 方法 ， 是 不 是 跃跃欲试 了 
呢 ? 那么 ， 就 扬 起 手中 的 笔 ,， 绘 出 自己 的 艺术 家 之 魂 吧 ~@ 


Ch22 芭 后 的 API 


橡皮 探 clearRect() 


之 前 一 直 教 大 家 怎么 绘图 ， 各 种 画笔 各 种 样式 ， 却 没有 教 过 童鞋 们 使 用 橡皮 擦 。 
Canvas 提供 了 clearRect() 方法 ， 就 是 清空 指定 矩形 上 的 画布 上 的 像素 。 它 接 
受 四 个 参数 ， 和 其 他 绘制 矩形 的 方法 一 样 一 context.clearRect(x,y,w,h) ° 


Tus 我 们 把 之 前 新 画布 (实例 9-1) 上 的 空白 矩形 给 所 了 吧 | 让 整个 页 面 显示 出 
完整 的 背景 图 片 。 


<!DOCTYPE html» 
«html lang="zh"> 
«head» 
«meta charset="UTF-8"> 
<title>clearRect()</title> 
<style> 
body { background: url("./images/bg2.jpg") repeat; } 
#canvas { border: ipx solid #aaaaaa; display: block; mar 
gin: 50px auto; } 
</style> 
</head> 
<body> 
<div id="canvas-warp"> 
<canvas id="canvas"> 
你 的 浏览 器 居然 不 支持 Canvas ? ! 赶快 换 一 个 吧 | | 
«/canvas» 
«/div» 


<script> 
window.onload = function(){ 

var canvas = document.getElementById("canvas"); 
canvas.width = 800; 
canvas.height = 600; 
var context = canvas.getContext("2d"); 
context.fillStyle = "#FFF"; 
context.fillRect(0,0,800,600); 


// 清 空 画 布 


context.clearRect(0,0,canvas.width,canvas.height); 


iz 
</script> 
</body> 
</html> 





橡皮 擦 就 是 这 么 简单 ~ 


这 里 通过 一 个 小 游戏 介绍 一 个 交互 性 很 强 的 API 


<!DOCTYPE html» 

«html lang="zh"> 

«head» 
«meta charset="UTF-8"> 
<title> 点 泡 泡 </title> 
<style> 








isPointInPath() ° 


#canvas ( border: 1px solid #aaaaaa; display: block; mar 


gin: 50px auto; } 
</style> 

</head> 

<body> 

<div id="canvas-warp"> 
<canvas id="canvas"> 


你 的 浏览 器 居然 不 支持 Canvas ? | 赶快 换 一 个 吧 | | 


«/canvas» 
«/div» 


<script: 
var balls = []; 
var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 


window.onload = function(){ 
canvas.width = 800; 
canvas.height = 600; 


for(var i=0; i<50; i++){ 
var aBall = { 
x: Math.random() * canvas.width, 
y: Math.random() * canvas.height, 
r: Math.random() * 50 + 20 


J; 

balls[i] = aBall; 
} 
draw(); 


canvas.addEventListener("mousemove",detect); 


Ig 


function draw(){ 
for(var iz0; i«balls.length; i++){ 
context.beginPath(); 
context.arc(balls[i].x, balls[i].y, balls[i].r, 0, M 
atm plo 2) 
context.globalAlpha - 0.5; 


var R Math.floor(Math.random() * 255); 
Math.floor(Math.random() * 255); 


Math.floor(Math.random() * 255); 


var G 


var B 


context.fillStyle = "rgb("+R+","+G+","4+B+ 
13 us 
context.fill(); 


function detect()1 
var x = event.clientX - canvas.getBoundingClientRect().1 
eft; 
var y = event.clientY - canvas.getBoundingClientRect().t 
Op, 


for(var iz0; i«balls.length; i++){ 
context.beginPath(); 
context.arc(balls[i].x, balls[i].y, balls[i].r, 0, M 
ati Pl’ 2): 


if(context.isPointInPath(x,y)){ 
context.fillStyle = "rgba(255, 255, 255,0.1)"; 
context.fill(); 


</script> 
</body> 
«/html» 





这 个 是 基于 示例 19-2 小 的 交互 游戏 。 鼠 标 移动 到 小 球 上 ， 人 小 球 就 会 渐渐 消失 。 这 里 


用 到 了 鼠标 事件 canvas.addEventListener("mousemove",function); 以 后 会 


详细 说 。 还 用 到 了 一 个 新 的 API isPointInPath() 。 这 个 方法 接收 两 个 参 
数 ， 就 是 一 个 点 的 坐标 值 ， 用 来 判断 指定 的 点 是 否 在 当前 路 径 中 。 若 是 ， 则 返回 
true ° 





像素 操作 API 


还 有 最 后 六 个 关于 像素 操作 的 API1， 基 本 不 会 用 到 ， 这 里 就 不 详细 说 了 。 列 表 如 
下 o 


属性 描述 
width 返回 ImageData 对 象 的 宽度 
height 返回 ImageData 对 象 的 高 度 


data 返回 一 个 对 象 ， 其 包含 指定 的 ImageData 对 象 的 图 像 数 所 


方法 描述 


createImageData() 创建 新 的 、 空 白 的 ImageData WH 
en ae TET 
getImageData() 返回 Unasa T fee 画布 上 指定 的 珑 
ES 全 三 把 图 像 数 据 (从 指定 的 pes AE) 放 回 画 


如 果 童 鞋 们 想 深入 学 习 ， 可 以 直接 查 HTML5 Canvas 参 考 手 册 ， 自 行 了 解 学 习 。 


Canvas 图 形 库 


不 知 不 觉 写 了 22 个 章节 ， 所 有 我 们 写 的 图 形 其 实 都 可 以 封装 在 一 个 JS 文件 里 ， 这 个 
文件 就 是 属于 我 们 自己 的 图 形 库 、 图 形 引 擎 。 当 然 ， 第 三 方 也 提供 了 很 多 优秀 的 图 
形 库 ， 这 里 推荐 三 个 给 大 家 。 


1. canvasplus 
2. Artisan JS 
3. Rgraph 


大 家 有 兴趣 的 话 可 以 自行 查阅 了 解 一 下 。 


Canvas API 没 有 结束 


Canvas 的 标准 一 直 在 更 新 ， 大 家 可 以 访问 W3C Canvas 标 准 查看 最 新 的 APIl。 但 是 
一 般 最 新 的 API 很 多 浏览 器 都 不 会 立刻 去 支持 ， 所 以 可 以 等 待 大 多 数 浏览 器 稳定 支 
持 了 之 后 ， 我 们 再 去 掌握 它 也 不 迟 。 


至 此 ， 目 前 所 有 的 Canvas API 我 们 就 已 经 讲 完 了 。 掌 握 了 所 有 的 绘画 方法 和 技巧 ， 
成 为 一 个 艺术 家 ， 并 不 是 我 们 最 终 的 目标 。 或 许 ， 现 在 大 家 已 然 可 以 绘制 出 优美 的 
图 形 ， 或 抽象 、 或 清新 。 或 许 ， 现 在 大 家 已 经 可 以 将 Canvas API 铭 记 于 心 ， 并 且 能 
够 熟练 使 用 它 。 

但 是 要 知道 ， 这 只 是 基础 。 在 之 后 的 日 子 里 ， 我 们 要 基于 Canvas 学 习 动 画 。 众 所 


周知 ， 动 画 是 由 一 帧 帧 的 画面 构成 ， 不 会 绘画 哪 来 动画 ? 所 以 ，Canvas 绘 制 只 是 后 
面 学 习 的 基础 。 


RS 


束 ， 而 是 一 个 新 的 开始 。 让 我 们 继续 前 进 ~@ 


